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

最新推荐文章于 2024-04-18 14:18:29 发布

转载最新推荐文章于 2024-04-18 14:18:29 发布 · 80 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jinhengyu/p/10257790.html

文章标签：

本文详细介绍了Unicode字符在HTML、CSS和JS中的不同表示方法，包括16进制和10进制编码，以及如何在前端开发中正确使用这些编码。

unicode字符的不同表示法

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

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

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

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

语法：

'\ + 16进制的unicode编码'

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

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

语法：

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

示例：

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

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

语法：

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

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

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

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

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

那么，如何知道一个汉字的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解析也可以

转载于:https://www.cnblogs.com/jinhengyu/p/10257790.html