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解析也能夠