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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM