js技巧--轉(zhuǎn)義符"\"的妙用
通常,我們?cè)趧?dòng)態(tài)給定一個(gè)container的innerHTML時(shí),通常是樣做的:
<div id="divc" />
<SCRIPT LANGUAGE="JavaScript">
var div = document.getElementById("divc");
var html = ""
html += ""
+ "<h1>"
+ "<a href='javascript:;' onclick=\"alert('javascript')\">DHTML innerHTML propery.</a>"
+ "</h1>";
div.innerHTML = html;
</SCRIPT>
寫(xiě)得習(xí)慣了的話,倒也不麻煩,但有沒(méi)有更簡(jiǎn)單的一個(gè)方法呢?請(qǐng)看下面的例子:
<SCRIPT LANGUAGE="JavaScript">
var html='\
<table width="100%" border="0" cellspacing="0" cellpadding="0">\
<tr>\
<td> </td>\
</tr>\
<tr>\
<td> </td>\
</tr>\
</table>\
';
alert(html);
</SCRIPT>
是不是沒(méi)有這么麻煩了?但還是要有幾點(diǎn)注意,看下面的例子
<SCRIPT LANGUAGE="JavaScript">
//要用\'把單引號(hào)轉(zhuǎn)義
var html='\
<h1>\
javascript技巧\
</h1>\
<a href="javascript:;" onclick="alert(\'javascript\')">javascript轉(zhuǎn)義</a></font>\
<br/>\
power by \'blueDestiny, never-online\'\
';
alert(html);
</SCRIPT>
該轉(zhuǎn)義的地方還是得用"\"
'-------------------------------------------------------
' 原理:
'-------------------------------------------------------
這個(gè)是我自己的個(gè)人觀點(diǎn),如果有不對(duì)的地方,請(qǐng)指出:
還是看個(gè)例子:
<SCRIPT LANGUAGE="JavaScript">
//s1和s2的字符a前都有一個(gè)空格
s1='\
a';
s2=' a';
document.write("s1: " + s1.length + "\ns2: " + s2.length);
</SCRIPT>
輸出結(jié)果:
s1: 2 s2: 2
也就是說(shuō)轉(zhuǎn)義符將回車(chē)轉(zhuǎn)義掉了!也就是說(shuō)
再看個(gè)例子:
<SCRIPT LANGUAGE="JavaScript">
//下面這個(gè)字符串是有空格的,也就是這樣s1='\ 的。
s1='\
a';
document.write("s1: " + s1.length);
</SCRIPT>
輸出錯(cuò)誤,錯(cuò)誤提示:未結(jié)束字符串常量。
也就是說(shuō)是多加了一個(gè)空格的原因。那再這樣試試
<SCRIPT LANGUAGE="JavaScript">
s1='\ \
a';
document.write("s1: " + s1.length);
</SCRIPT>
結(jié)果很明顯了,在字符串中,"\"轉(zhuǎn)義符可以將回車(chē)轉(zhuǎn)義掉(也就是回車(chē)符不存在了),但是不能將制表符,以及空格字符轉(zhuǎn)義(它們是存在的,上面的例子說(shuō)明了這一點(diǎn))。
最后,給大家一個(gè)小tips,還記得上面的這個(gè)代碼嗎?
<SCRIPT LANGUAGE="JavaScript">
//要用\'把單引號(hào)轉(zhuǎn)義
var html='\
<h1>\
javascript技巧\
</h1>\
<a href="javascript:;" onclick="alert(\'javascript\')">javascript轉(zhuǎn)義</a></font>\
<br/>\
power by \'blueDestiny, never-online\'\
';
alert(html);
</SCRIPT>
仔細(xì)觀察彈出來(lái)的模態(tài)框,看看字符串是怎么樣的?應(yīng)該就會(huì)明白了。
相關(guān)文章
微信小程序云開(kāi)發(fā)如何實(shí)現(xiàn)數(shù)據(jù)庫(kù)自動(dòng)備份實(shí)現(xiàn)
這篇文章主要介紹了小程序云開(kāi)發(fā) 數(shù)據(jù)庫(kù)自動(dòng)備份實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08IE下window.onresize 多次調(diào)用與死循環(huán)bug處理方法介紹
IE下window.onresize多次調(diào)用與死循環(huán)bug處理方法介紹。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11Cropper.js進(jìn)階之裁剪后保存至服務(wù)器實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Cropper.js進(jìn)階之裁剪后保存至服務(wù)器實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05Bootstrap中的fileinput 多圖片上傳及編輯功能
這篇文章主要介紹了Bootstrap中的fileinput 多圖片上傳及編輯功能的實(shí)現(xiàn),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09微信小程序通過(guò)自定義animate-numbers組件實(shí)現(xiàn)進(jìn)入頁(yè)面時(shí)數(shù)字跳動(dòng)效果
文章介紹了如何在微信小程序中實(shí)現(xiàn)進(jìn)入頁(yè)面時(shí)的數(shù)字跳動(dòng)效果,通過(guò)自定義一個(gè)名為`animate-numbers`的組件來(lái)實(shí)現(xiàn)這一功能,本文給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-01-01uniapp使用uni-file-picker實(shí)現(xiàn)上傳功能
這篇文章主要介紹了uniapp使用uni-file-picker實(shí)現(xiàn)上傳功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-07-07js實(shí)現(xiàn)購(gòu)物車(chē)加減和價(jià)格運(yùn)算
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)購(gòu)物車(chē)加減和價(jià)格運(yùn)算,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08