Fork me on github

HTML、CSS、JS对unicode字符的不同处理

unicode字符的不同表示法

unicode字符在html、css和js中的表示方法均不相同,下面分别作介绍。

原文发表于这里

css表示法

首先来一段很常见的bootstrap的字体图标代码:

.glyphicon-home:before {
	content: "\e021";
}

上面代码中的e021就是这个字符的unicode码,是16进制。

语法:

'\ + 16进制的unicode编码'

如:'\5b89'表示汉字“安”:

<div class="test"></div>
<style>
.test: before {content: "\e021";}
</style>

js表示方法

语法:

'\u + 16进制的unicode编码'

示例:

// 如:'\u5b89'表示汉字“安”
console.log('\u5b89'); // 输出“安”

html表示方法

html特殊一点,使用的是10进制,一开始没注意这个搞的半天出不来郁闷很久。

语法:

'&# + 10进制的unicode编码 + 英文分号;'

& #23433;(注意,由于正常书写的话发表之后会被转换成汉字,所以我这里故意中间留了空格防止转换)表示汉字,结尾的分号经测试不加也没问题,但是最好还是加一下。

<div>
	这是unicode表示的字符“安”:& #23433;(这里故意留一空格防止转换)
</div>

另外,一些特殊字符还有其它表示,也就是常说的html转义字符,如(由于自动转换问题,这里用图片表示):

完整的HTML转义字符表可以参见这里:

http://tool.oschina.net/commons?type=2

获取汉字的unicode编码

那么,如何知道一个汉字的unicode的编码呢?很简单:

'安'.charCodeAt(); // 输出的 23433 就是汉字 安 的unicode编码,不过注意是10进制的
String.fromCharCode(23433); // 输出 '安'

得到了10进制的unicode编码,再如果想在js和css里面用的话,就需要用toString(16)转16进制再做进一步处理了。

var unicode = '\\u'+'茗'.charCodeAt().toString(16); // 输出字符串:"\u8317"
JSON.parse('"'+unicode+'"'); // 输出汉字:"茗"
eval('"'+unicode+'"'); // 或者使用eval解析也可以
posted @   我是小茗同学  阅读(15398)  评论(3编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
查看
评论
点击右上角即可分享
微信分享提示