有時候我們需要使用js輸出html代碼，會涉及一些標簽、變量。 對於很長的html代碼，為了讓js具有較好的可讀性，需要在js里對html代碼進行一定的拆分、拼接。
簡單明了版
通常我們這樣做
var
div = document.getElementById(
"divc"
);
var
html =
""
html +=
""
+
"<h1>"
+
"<a href="
javascript:;
" onclick="
\"alert(
'javascript'
)\"
">DHTML innerHTML propery.</a>"
+
"</h1>"
;
div.innerHTML = html;
|
使用轉義技巧這樣做
var
div = document.getElementById(
"divc"
);
var
html =
""
html +=
'\
<h1>\
<a href="javascript:;" onclick="alert(\'javascript\')">DHTML innerHTML propery.</a>\
</h1>\
'
;
div.innerHTML = html;
|
利用轉義符去掉回車。 注：引號嵌套時也是需要轉義的。
補充：2016-12-28
其實，在w3c手冊中也有所體現，請參閱“JavaScript 語句”中的“對代碼行進行折行”。
對代碼行進行折行
您可以在文本字符串中使用反斜杠對代碼行進行換行。下面的例子會正確地顯示：document.write("Hello \
World!");
不過，您不能像這樣折行：document.write \
("Hello World!");
擴展閱讀一-未結束的字符串常量和轉義符用法
本節內容：
未結束的字符串常量的解決辦法
1，如果沒有"" ，錯誤是未結束的字符串常量原來 ：
<input type="button" onclick=location.href="studentedit.asp?cid=<%=nCID%>&cname=<%=sCName%>" />
更改后：<input type="button" onclick="location.href='studentedit.asp?cid=<%=nCID%>&cname=<%=sCName%>'" />
2，js老是出錯，明明ie7和Firefox中沒有任何錯誤，在ie6就提示錯誤“未結束的字符串常量”，最后請教了Google，才知道是編碼不統一的問題，可能是引用了與頁面編碼格式不同的js文件，或者是頁面中包含了編碼不同的代碼，如漢字或者其它字符。
經過排查，發現是頁面的編碼不統一，將設置頁面編碼格式語句：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
從body上面調放至js代碼之前。
3，js技巧--轉義字符"\"的妙用
// blueDestiny, never-online // blueDestiny [at] 126.com
通常，在動態給定一個container的innerHTML時，通常是樣做的：
<div id="divc" />
<SCRIPT LANGUAGE="JavaScript">
var div = document.getElementByIdx("divc");
var html = ""
html += ""
+ "<h1>"
+ "<a href='javascript:;' onclick=\"alert('javascript')\">DHTML innerHTML propery.</a>"
+ "</h1>";
div.innerHTML = html;
</SCRIPT>
更簡單的方法：
<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>
有幾點注意，看下面的例子
<SCRIPT LANGUAGE="JavaScript"> //要用\'把單引號轉義 var html='\ <h1>\ javascript技巧\ </h1>\ <a href="javascript:;" onclick="alert(\'javascript\')">javascript轉義</a></font>\ <br/>\ power by \'blueDestiny, never-online\'\ '; alert(html); </SCRIPT>
該轉義的地方還是得用"\"
'-------------------------------------------------------
' 原理：
'-------------------------------------------------------
這個是我自己的個人觀點，如果有不對的地方，請指出：
還是看個例子：
<SCRIPT LANGUAGE="JavaScript">
//s1和s2的字符a前都有一個空格
s1='\
a';
s2=' a';
document.write("s1: " + s1.length + "\ns2: " + s2.length);
</SCRIPT>
輸出結果：
s1: 2 s2: 2
也就是說轉義符將回車轉義掉了！也就是說
再看個例子：
<SCRIPT LANGUAGE="JavaScript">
//下面這個字符串是有空格的，也就是這樣s1='\ 的。
s1='\
a';
document.write("s1: " + s1.length);
</SCRIPT>
輸出錯誤，錯誤提示：未結束字符串常量。
也就是說是多加了一個空格的原因。那再這樣試試
<SCRIPT LANGUAGE="JavaScript">
s1='\ \
a';
document.write("s1: " + s1.length);
</SCRIPT>
結果很明顯了，在字符串中，"\"轉義符可以將回車轉義掉（也就是回車符不存在了），但是不能將制表符，以及空格字符轉義（它們是存在的，上面的例子說明了這一點）。
最后，給大家一個小tips，還記得上面的這個代碼嗎？
<SCRIPT LANGUAGE="JavaScript"> //要用\'把單引號轉義 var html='\ <h1>\ javascript技巧\ </h1>\ <a href="javascript:;" onclick="alert(\'javascript\')">javascript轉義</a></font>\ <br/>\ power by \'blueDestiny, never-online\'\ '; alert(html); </SCRIPT>
觀察下彈出的模態框，看看字符串是怎么樣的？應該就會明白了。
拓展閱讀二-JavaScript:多行字符串
引：http://www.cnblogs.com/ziyunfei/archive/2012/10/04/2711551.html
原文:http://asenbozhilov.com/articles/multiline-strings.html
多行字符串的作用是用來提高源代碼的可讀性.尤其是當你處理預定義好的較長字符串時,把這種字符串分成多行書寫更有助於提高代碼的可讀性和可維護性.在一些語言中,多行字符串還可以用來做代碼注釋.
大部分動態腳本語言都支持多行字符串,比如Python, Ruby, PHP. 但Javascript呢?
譯者注:python中可以使用兩種多行字符串的寫法,一種是使用三引號,也是python中多行注釋的方法,這種方法產生的多行字符串是真正的多行.也就是說,解釋器會認為每行的結尾處的確有一個"\n":
>>>print("""我 你 他 """) 我 你 他另一種寫法是
>>>print("我\ 你\ 他\ ") 我你他這種寫法也是下面要講的JavaScript目前實現的寫法,它產生的實際上只有一行字符串.但稱它為多行指的是在源代碼中這個字符串占用了多個物理行(對應的概念是邏輯行).
Ruby, PHP中是通過Here document實現多行字符串.
你在網上見過下面這種結論嗎?
"Javascript不支持多行字符串."
"多行字符串不是合法的JavaScript語法."
如果是的話,忘掉它們吧,這樣的說法是不對的.Javascript其實支持多行字符串.
關於JavaScript最奇怪的一件事是,盡管這門語言有着非常好的規范文檔ECMA-262.但卻有很多關於該語言的誤解.網上有太多描述不恰當的或者完全錯誤的文章.
當然,每個人都有權選擇自己去讀什么文章,有權選擇是否相信文章中給出的結論.但當我在博客上,郵件列表上,twitter上,或者其他任何地方閱讀關於JavaScript的東西時,我總是會動手進行測試,最主要的是我會打開ECMA-262,把文中給出的信息和文檔做對比,看看是不是像他說的那樣.也許你會問我:"那你為什么還要讀別人的文章啊?".是啊,既然有了ECMA-262文檔,我們為何還要去讀別人寫的文章呢?首先,規范文檔是比較難閱讀和難理解的.你必須很熟悉文檔中提到的那些抽象的東西才能真正的弄懂它.而且你必須閱讀完整的相關內容.如果你跳過一些單詞或句子,你就可能理解錯誤.
寫在博客中的文章可以看作是更高層次的文檔.通常意味着作者是在讀過文檔之后,用更容易理解的話語和代碼片段解釋了文檔中的內容.這樣的文章才算是好文章.
多行字符串就是我上面所說的一個例子.它確實是正式規范(ECMA 265 5th edition)的一部分,ES5擴展了字符串字面量的語法.在(7.8.4 String Literals)中添加了DoubleStringCharacter和 SingleStringCharacter: LineContinuation.
LineContinuation 的語法是:
\ LineTerminatorSequence
LineTerminatorSequence 指的是下面這些字符中的一個:
| 換行符 | <LF> |
| 回車符 | <CR> |
| 行分割符 | <LS> |
| 段分隔符 | <PS> |
換句話說,你可以通過轉義行終止符來實現多行字符串.你必須這么做,否則會得到一個語法錯誤.
var htmlStr = '\
<div>\
content\
</div>\
';
當他,這種寫法只支持ECMA-262-5的環境.(譯者注:實際上,ES3的環境也全都支持)
但是需要注意的是,當輸出字符串時,換行符是不會顯示出來的.如果你需要真實的換行,必須在反斜杠前面加上一個\n.
如果你需要兼容舊的引擎環境,你應該使用多個字符串相連接的辦法,或者把多個字符串分別放在一個數組的元素中,最后join它們
var htmlStr = '<div>' +
'content' +
'</div>';
var htmlStr = [
'<div>',
'content',
'</div>'
].join('');
JavaScript風格的多行字符串是有點小丑,而且很容易出錯.不過有個好消息是,在未來版本的規范中,將會有一個 Template Strings: http://wiki.ecmascript.org/doku.php?id=harmony:quasis.
其中最大的不同是,LineTerminatorSequence可以直接出現在字符串字面量中而不需要使用反斜杠轉義.
譯者注:再介紹兩種沒有什么實際用途的實現多行字符串的寫法.其實最好不要看.
1.利用E4X的寫法
var string = (<xml><![CDATA[
我 你 他 ]]></xml>).toString().trim(); console.log(string); 我 你 他E4X只有Firefox支持,支持了很多年了,但其他瀏覽器一直不實現,所以也流行不起來,而且從Firefox17開始,E4X將會被默認禁用.
2,利用函數內部的多行注釋
function hereDoc(f) { return f.toString().replace(/^[^\/]+\/\*!?\s?/, '').replace(/\*\/[^\/]+$/, ''); } var string = hereDoc(function () {/*
我 你 他 */}); console.log(string) 我 你 他Firefox去年的版本還不支持這種寫法,原因是在調用函數的toString方法時,會把注釋過濾掉.不過現在支持了.