單雙引號

在js代碼中

在js中單、雙引號引起來的是字符串，如果我們要在字符串中使用單、雙引號，需要反斜杠進行轉義

let str='user\'s name';

// or

let str=" user's name";

// or

let str="she said:\"...\".";

如果在字符串中輸出反斜杠，仍然是用反斜杠轉義，即2個反斜杠輸出1個反斜杠

在html代碼中

html標簽中，屬性值通常用雙引號引起來，也可以使用單引號或不用引號。

這3種寫法都正確，不過通常我們是選擇用雙引號引起來。

如果我們要在屬性值中使用單、雙綽號，我們不能直接寫成下面這樣

這些全部是錯誤的。我們要像在js中對單、雙引號轉義一樣，對屬性中的單、雙引號轉義

在html中輸出預留符號，可以使用字符實體轉義的形式，這里有簡單介紹：http://www.w3school.com.cn/html/html_entities.asp。即想輸出一個雙引號可以使用"的形式，

除此之外，html還支持十進制與十六進制編碼的形式輸出字符，如我們知道字符a的ascii碼的十進制是97　十六進制是61

所以我們在頁面body中輸出一個字符a，有以下3種形式

a

a

a

同樣，單雙引號也有十進制(單：39，雙：34)與十六進制(單：27，雙：22)，所以我們在屬性中輸出一個單引號有2種選擇，十進制與十六進制

而輸出一個雙引號則有3種選擇

當js代碼遇上實體編碼

我們可以通過dom節點提供的事件寫上調用js的代碼，如點擊body彈出hello這個字符串，我們可以寫成

click here

如果我們的需求是就彈出一個雙引號呢？

根據前述規則，我們要寫成：

click here

當然，alert里的單引號也可以使用十進制或十六進制編碼

click here

這樣也是可以的。

是不是有點xss的感覺?

如果我們把彈雙引號的需求改成單引號呢？

click here

如果我們用十進制或十六進制編碼呢？

click here

這樣仍然是不可以的

我們要對js字符串中的單引號進行轉義，如

click here

或

click here

前面的οnclick="alert('\'')"看起來還正常，后面的這個οnclick="alert('\"')"就有點不直觀了。因為后面這個看上去反斜杠像在轉義&這1個字符，而&在js的字符串中并不需要轉義的。

動態輸出

如前述的alert彈出的消息，如果是一個變量控制，動態輸出呢？

click here

那我們這個msg字符串就得注意了，從這個示例來看，這個動態的msg即出現在屬性onclick中，也出現在alert的單引號開始的字符串中。

我們要對msg中的雙引號轉成"或"或"，并對msg中單引號的前面加上一個反斜杠\　?

題外話：對msg中的反斜杠需要做double處理，因為反斜杠在html屬性中并不是特殊的，但在js的字符串中是特殊的。因此正確的做法是對反斜杠及單引號前面各加上一個反斜杠

然而，你并不能保證屬性是用雙引號，alert中的字符串用的是單引號，因為可以寫成下面這樣

click here

?

這種情況我們要對msg中的單引號轉成'或'，并對msg中雙引號前面加上一個反斜杠\

題外話：同上

看上去要根據不同的情況做不同的處理，其實也不需要

我們只需要對單、雙引號前面加上一個反斜杠\然后再對單、雙引號實體編碼即可。

在js中如果反斜杠后面跟的不需要反斜杠轉義的字符，那么這個反斜杠是被丟棄的，因此像

var str="user\'s name";

單引號前面多加一個反斜杠也不要緊的。

自動化處理與識別提醒

在magix項目中，由于magix-combine的支持，可識別出屬性中js代碼的部分，并自動化處理，如

click here

name這個變量可包含任意的單、雙引號及反斜杠。工具自動識別并處理，開發者不需要做任何事情。

而對于這樣的寫法：

click here

click here

第一種寫法其實并不正確，但第二種情況看上去又怪怪的。magix-combine工具能識別出來是否需要添加反斜杠，并自動添加處理。

第一種需要添加反斜杠，工具會自動加上，并提醒開發者這里的寫法是不正確的。

第二種說明開發者意識到了問題所在，自己處理了，工具就不再處理也不再提醒開發者。

相關鏈接:

總結

以上是生活随笔為你收集整理的汉字转html实体符号js_html实体编码遇上js代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。