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

 unicode字符的不同表示法

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

  css表示法

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

  1. .glyphicon-home:before {

  2.     content: "\e021";

  3. }

复制代码

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

  1. '\ + 16进制的unicode编码'

复制代码

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

  1. <div class="test"></div>

  2. <style>

  3. .test: before {content: "\e021";}

  4. </style>

复制代码

  js表示方法

  语法:

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

复制代码

  示例:

  1. // 如:'\u5b89'表示汉字“安”

  2. console.log('\u5b89'); // 输出“安”

复制代码

  html表示方法

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

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

复制代码

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

  1. <div>

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

  3. </div>

复制代码

  另外,一些特殊字符还有其它表示,也就是常说的 html转义字符 ,如(由于自动转换问题,这里用图片表示):
1.png 
  完整的HTML转义字符表可以参见这里:
  http://tool.oschina.net/commons?type=2

  获取汉字的unicode编码

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

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

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

复制代码

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

  1. var unicode = '\\u'+'茗'.charCodeAt().toString(16); // 输出字符串:"\u8317"

  2. JSON.parse('"'+unicode+'"'); // 输出汉字:"茗"

  3. eval('"'+unicode+'"'); // 或者使用eval解析也可以

复制代码


来源:CSDN


上一篇: 前端开发人员须知html5和html4之间的区别

下一篇: Google 推出新版 Chrome:HTML5 取代 Flash 成为默认选项

分享到: 更多