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解析也可以