JS里并沒有標準的多行字符串的表示方法，但是在用模板的時候，為了保證模板的可閱讀性，我們又不可避免的使用多行字符串，所以出現了各種搞法，這里以一段jade的模板作為示例，簡單總結和對比一下。

一、字符串相加

這是最容易理解也很常用的一種形式，如下

var tmpl =''+'!!! 5' +'html' +' include header' +' body' +' //if IE 6' +' .alert.alert-error' +' center 對不起，我們不支持IE6，請升級你的瀏覽器' +' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下載' +' a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下載' +' include head' +' .container' +' .row-fluid' +' .span8' +' block main' +' include pagerbar' +' .span4' +' include sidebar' +' include footer' +' include script'

優點:

易理解，簡單，可靠

足夠靈活，可以在單個字符串中添加js邏輯

缺點 :

并不是真正意義上的多行字符串, 如果想要真正的多行，需要自己加\n

大量的+號看上去滿天星,大量的'和", 丑陋

二、使用反斜線

這個叫續行符, 這個并非一種很常見的方式, 但是一旦用上了，還是很容易上癮，只需要加一個字符

var tmpl ='\!!! 5\html\include header\body\//if IE 6\.alert.alert-error\center 對不起，我們不支持IE6，請升級你的瀏覽器\a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下載\a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下載\include head\.container\.row-fluid\.span8\block main\include pagerbar\.span4\include sidebar\include footer\include script'

優點:

簡單,每一行只需要有多一個\

高效！在大部分的瀏覽器上，這種方式都是最快的，

缺點 :

致命缺陷，每一行的\必須不可以有空格，否則直接腳本錯誤

并不是真正意義上的多行字符串, 如果想要真正的多行，需要自己加\n

盡管絕大部分的js引擎都支持它，但是它并不是ECMAScript的一部分

三、字符串數組join

var tmpl = ['!!! 5' ,'html' ,' include header' ,' body' ,' //if IE 6' ,' .alert.alert-error' ,' center 對不起，我們不支持IE6，請升級你的瀏覽器' ,' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下載' ,' a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下載' ,' include head' ,' .container' ,' .row-fluid' ,' .span8' ,' block main' ,' include pagerbar' ,' .span4' ,' include sidebar' ,' include footer' ,' include script'].join('\n');

優點:

真正意義上的多行字符串

易理解，簡單，可靠

足夠靈活，可以在單個字符串中添加js邏輯

缺點 :

大量的,號和'、", 丑陋

五、String.prototype.concat

var tmpl = String.prototype.concat.call('!!! 5' ,'html' ,' include header' ,' body' ,' //if IE 6' ,' .alert.alert-error' ,' center 對不起，我們不支持IE6，請升級你的瀏覽器' ,' a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下載' ,' a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下載' ,' include head' ,' .container' ,' .row-fluid' ,' .span8' ,' block main' ,' include pagerbar' ,' .span4' ,' include sidebar' ,' include footer' ,' include script');

優點:

不常用，事實上字符串的concat方法遠沒有+號常見

易理解，簡單，可靠

足夠靈活，可以在單個字符串中添加js邏輯

缺點 :

并不是真正意義上的多行字符串

大量的,號和'、", 丑陋

五、heredoc

這是一種很有技巧的解決辦法, 利用了function的toString方法

function heredoc(fn) {return fn.toString().split('\n').slice(1,-1).join('\n') + '\n' } var tmpl = heredoc(function(){/*!!! 5htmlinclude headerbody//if IE 6.alert.alert-errorcenter 對不起，我們不支持IE6，請升級你的瀏覽器a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下載a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下載include head.container.row-fluid.span8block maininclude pagerbar.span4include sidebarinclude footerinclude script*/});

優點:

模板字符串內不必寫多余的任何字符，干凈，簡單

真正意義上的多行字符串, 有\n哦

缺點 :

不可以在單個字符串中添加js邏輯

容易被壓縮器壓縮掉，yui compressor可以通過/*!來避免被壓縮掉，uglifyjs和gcc也可以通過選項配置不刪除特定的注釋，這個不是大問題

六、coffeescript

相當于換了一個語言，其實這種語言上缺少的功能，通過coffeescript這種以js為編譯目標的語言來實現是一種非常棒的選擇。

var tmpl = """ !!! 5htmlinclude headerbody//if IE 6.alert.alert-errorcenter 對不起，我們不支持IE6，請升級你的瀏覽器a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下載a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下載include head.container.row-fluid.span8block maininclude pagerbar.span4include sidebarinclude footerinclude script"""

優點:

易理解，簡單，可靠

缺點 :

需要了解coffeescript

整個文件都需要用coffeescript來寫

七、ES6

ES6的有一個新的特性，Template Strings, 這是語言層面上第一次實現了多行字符串, 在chrome canary里打開Enable Experimental JavaScript就可以使用這個特性，另外typescript也會支持這種方式

var tmpl = `!!! 5htmlinclude headerbody//if IE 6.alert.alert-errorcenter 對不起，我們不支持IE6，請升級你的瀏覽器a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下載a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下載include head.container.row-fluid.span8block maininclude pagerbar.span4include sidebarinclude footerinclude script`

優點:

易理解，原生支持

真正的多行字符串

缺點 :

JS引擎支持有限

八、總結

看了這么些寫法，如何選擇？如果你用的是coffeescript，放心大膽的使用它支持的多行字符串寫法；如果是在客戶端，同時你解決了你的壓縮器去掉注釋的問題，推薦使用heredoc；如果你無法解決壓縮器的問題，使用反斜線連接吧，每行只需要加一個字符。

原文：http://www.jb51.net/article/49480.htm

總結

以上是生活随笔為你收集整理的javascript创建多行字符串的方法（转）的全部內容，希望文章能夠幫你解決所遇到的問題。

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