javascript的创建多行字符串的7种方法


Posted in Javascript onApril 29, 2014

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;如果你无法解决压缩器的问题,使用反斜线连接吧,每行只需要加一个字符。

Javascript 相关文章推荐
JavaScript库 开发规则
Jan 31 Javascript
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
js DOM模型操作
Dec 28 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
JQuery教学之性能优化
May 14 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 #Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 #Javascript
JS实现两个大数(整数)相乘
Apr 28 #Javascript
关于img的href和src取变量及赋值的方法
Apr 28 #Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 #Javascript
JS计算网页停留时间代码
Apr 28 #Javascript
js分页代码分享
Apr 28 #Javascript
You might like
curl和libcurl的区别简介
2015/07/01 PHP
PHP发送短信代码分享
2015/08/11 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
这段js代码得节约你多少时间
2011/12/20 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
JQuery+DIV自定义滚动条样式的具体实现
2013/06/25 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
django admin 后台实现三级联动的示例代码
2018/06/22 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
python hough变换检测直线的实现方法
2019/07/12 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
详解numpy.ndarray.reshape()函数的参数问题
2020/10/13 Python
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
简约控的天堂:The Undone
2016/12/21 全球购物
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
三查三看党性分析材料
2014/02/18 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
地陪导游欢迎词
2015/01/26 职场文书
滴水洞导游词
2015/02/10 职场文书
优秀党员个人总结
2015/02/14 职场文书
单位考核聘任报告
2015/03/02 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis