javascript的创建多行字符串的7种方法
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(){/*
!!! 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逻辑
容易被压缩器压缩掉，yui compressor可以通过/*!来避免被压缩掉，uglifyjs和gcc也可以通过选项配置不删除特定的注释，这个不是大问题
六、coffeescript
相当于换了一个语言，其实这种语言上缺少的功能，通过coffeescript这种以js为编译目标的语言来实现是一种非常棒的选择。
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
"""
优点:
易理解，简单，可靠
缺点 :
需要了解coffeescript
整个文件都需要用coffeescript来写
七、ES6
ES6的有一个新的特性，Template Strings, 这是语言层面上第一次实现了多行字符串, 在chrome canary里打开Enable Experimental JavaScript就可以使用这个特性，另外typescript也会支持这种方式
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引擎支持有限
八、总结
看了这么些写法，如何选择？如果你用的是coffeescript，放心大胆的使用它支持的多行字符串写法；如果是在客户端，同时你解决了你的压缩器去掉注释的问题，推荐使用heredoc；如果你无法解决压缩器的问题，使用反斜线连接吧，每行只需要加一个字符。
相关文章
本文主要分享了利用canvas画多边形的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
下面小编就为大家带来一篇详谈javascript精度问题与调整。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要为大家介绍了微信小程序实现动态渲染Markdown示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
在Three.js中物体通常是通过创建"网格"(Mesh)对象来描述的,下面这篇文章主要给大家介绍了关于three.js修改物体位置的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了浅谈发布订阅模式与观察者模式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
这篇文章主要介绍了JavaScript 变量,数据类型基础,结合实例形式详细分析了JavaScript变量声明、字符串、数组、对象等基本使用方法与操作注意事项,需要的朋友可以参考下2020-01-01
ES6标准新增了一种新的函数，Arrow Function（箭头函数），箭头函数相当于匿名函数，并且简化了函数定义，本文重点给大家介绍JavaScript中的箭头函数,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了layui中的tab控件点击切换触发事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家介绍了Javascript类型转换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
最近正在做的一个小程序项目中需要用到一个可清除的输入框控件，为了方便小编直接使用了可清除的input自定义组件，下面脚本之家小编给大家带来了微信小程序自定义组件之可清除的input组件，感兴趣的朋友一起看看吧2018-07-07
最新评论