Unicode字符在HTML、CSS和JS中的表示方法

最新推荐文章于 2023-07-24 12:40:37 发布

qq_40927742

最新推荐文章于 2023-07-24 12:40:37 发布

阅读量558

点赞数

原文链接：http://blog.liuxianan.com/display-unicode-character-in-html-css-and-js.html；https://blog.csdn.net/yiifaa/article/details/53781135

版权

1. HTML字符计算方式

对于Unicode，HTML采用十进制方式计算，并以”&#{unicode};”方式进行表示，例如对于“|”字符，HTML的表示方式如下：

<span>&#0124;</span>

需要特别注意的是，十进制必须至少4位数，也就是说如果不足4位，则“&#”后面补0，再强调一遍，千万不要省略0。

2. CSS字符计算方式

对于Unicode，CSS采用十六进行方式进行计算，并以“{unicode}”方式进行表示，同样以“|”字符为例，CSS的表示方式如下：

/* 这里并没有4个字符的要求，所以\007C并不是必须的 */
span:before {
    content : '\7C'
}

注：&emsp; 是 \2003
所以伪元素缩进两个字可以这样表示：

p:before{
	content:"\2003\2003";
}

3. JS计算方式

对于Unicode，JS也采用十六进制的方式进行计算，但以“\u{unicode}”的方式表示，继续以“|”字符为例，JS的表示如下：

document.querySelector('span').innerHTML = '\u007C';

这里需要特别指出的是，对于innerHTML的赋值即可以采用”\u007C”方式，也可以采用”&#0124 ;”HTML方式，但对于input输入框，或者alert打印信息，只能采用”\u007C”方式。

4.获取汉字的Unicode编码

那么，如何知道一个汉字的unicode的编码呢：

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

根据10进制的unicode编码得到汉字：

String.fromCharCode(23433); // 输出 '安'

得到了10进制的unicode编码，再如果想转换成\u表示法的话，就需要用toString(16)转16进制再做进一步处理了。

// 这里注意需要2个斜杠，输出拼接好的字符串："\u8317"
var unicode = '\\u'+'茗'.charCodeAt().toString(16);
// 要想将上面的"\u8317"转换成真正的汉字需要使用JSON.parse或者eval
JSON.parse('"'+unicode+'"'); // 输出汉字："茗"
eval('"'+unicode+'"'); // 或者使用eval解析也可以