這周在開發(fā)后端系統(tǒng)的時(shí)候，遇到了需要將后端傳過來的轉(zhuǎn)義字符進(jìn)行轉(zhuǎn)義然后再渲染到html中，因?yàn)橹耙矝]有遇到過，所以研究了研究，記錄一下。

記得上大學(xué)時(shí)候?qū)W習(xí)C語言就有提到過轉(zhuǎn)義字符，比如\n表示回車，\t表示水平制表符等等。其實(shí)所有編程語言都有轉(zhuǎn)移字符，轉(zhuǎn)移字符出現(xiàn)的原因基本上就兩點(diǎn)：

1. 使用轉(zhuǎn)義字符來表示字符集中定義的字符，比如ASCll里面的控制字符及回車換行等字符，這些字符都沒有現(xiàn)成的文字代號。所以只能用轉(zhuǎn)義字符來表示
2. 某一些特定的字符在編輯語言中被定義為特殊用途的字符。這些字符由于被定義為特殊用途，它們失去了原有的意義。例如在html中，<被HTML定義為標(biāo)簽的開始，所以當(dāng)我們轉(zhuǎn)入<時(shí)，HTML就會(huì)把它當(dāng)作為開始，而不是當(dāng)作一個(gè)<來看待

由于不同的語言關(guān)鍵字不同，例如在一般的編程語言中，"會(huì)被當(dāng)作代碼的一部分，但是在html中它會(huì)被直接渲染，再如常見的編程語言中\n表示回車，但是在html中<br>表示回車

這就導(dǎo)致了如果后端返回的是想要在前端展示的一段代碼，則必然會(huì)包含轉(zhuǎn)移字符，而這些轉(zhuǎn)義字符html是無法識別的

解決——js轉(zhuǎn)換轉(zhuǎn)義字符

由于html與js所用的轉(zhuǎn)義字符不同所以導(dǎo)致了無法正常渲染，所以需要在js中先將轉(zhuǎn)義字符轉(zhuǎn)換，然后在渲染到html中，在js中轉(zhuǎn)換轉(zhuǎn)義字符常用的有兩種方法：

• eval()
• JSON.parse()

eval()函數(shù)會(huì)將傳入的字符串當(dāng)做JavaScript代碼進(jìn)行執(zhí)行。這個(gè)函數(shù)一般是不推薦使用的，因?yàn)樗麍?zhí)行的代碼擁有著執(zhí)行者的權(quán)利。如果用eval()運(yùn)行的字符串代碼被惡意方操控修改,可能會(huì)利用最終在用戶機(jī)器上運(yùn)行惡意方部署的惡意代碼，并導(dǎo)致失去對網(wǎng)頁或者擴(kuò)展程序的權(quán)限。所以這種方法是不推薦的

JSON.parse()方法用來解析JSON字符串，構(gòu)造由字符串描述的JavaScript值或?qū)ο?，?jīng)過這個(gè)轉(zhuǎn)換，由于代碼的執(zhí)行，轉(zhuǎn)義字符會(huì)被自動(dòng)轉(zhuǎn)義，從而拿到我們想要的效果，但是使用這個(gè)方法解析的時(shí)候需要注意一點(diǎn)：必須組合成JSON字符串，所以我們需要將拿到的數(shù)據(jù)進(jìn)行包裝：

decodeValueFun(value) {
    const decodeValue = JSON.parse(`{"key":${value}}`);
    return decodeValue.key;
},

這樣返回的數(shù)據(jù)就是經(jīng)過轉(zhuǎn)義的數(shù)據(jù)了

疑問???

在實(shí)際測試的時(shí)候發(fā)現(xiàn)，如果將后端返回的數(shù)據(jù)直接貼入前端js代碼中然后去直接展示到頁面中，轉(zhuǎn)義字符會(huì)被自動(dòng)識別，但是如果將后端返回的字符串直接渲染到html頁面中，則字符串中的轉(zhuǎn)義字符直接被當(dāng)作字符串處理，這說明在js使用字符串的時(shí)候已經(jīng)將轉(zhuǎn)義符自動(dòng)轉(zhuǎn)義，不知道這個(gè)是什么原因。

附：

常見的HTML轉(zhuǎn)義字符

更多html轉(zhuǎn)義字符見鏈接：http://tool.oschina.net/commons?type=2

常見的編程語言的字符表