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 相关文章推荐
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
详解webpack 多入口配置
Jun 16 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
php教程之phpize使用方法
2014/02/12 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
Python字符串格式化
2015/06/15 Python
python中requests小技巧
2017/05/10 Python
解读python logging模块的使用方法
2018/04/17 Python
django初始化数据库的实例
2018/05/27 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
会计自我鉴定范文
2013/10/06 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
工程质量承诺书
2014/03/27 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
财务审计整改报告
2014/11/06 职场文书
社区工作者个人总结
2015/02/28 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python