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的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
Node.js Express 框架 POST方法详解
Jan 23 Javascript
bootstrap弹出层的多种触发方式
May 10 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
详解React之key的使用和实践
Sep 29 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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
php在window iis的莫名问题的测试方法
2013/05/14 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
PHP中使用CURL发送get/post请求上传图片批处理功能
2018/10/15 PHP
JS代码判断IE6,IE7,IE8,IE9的函数代码
2013/08/02 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
Python如何对XML 解析
2020/06/28 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
Java模拟试题
2014/11/10 面试题
Unix里面如何在后台运行程序
2016/10/14 面试题
奖学金自我鉴定范文
2013/10/03 职场文书
应届生船舶驾驶求职信
2013/10/19 职场文书
幼儿教师思想汇报
2014/01/10 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
2014年管理工作总结
2014/11/22 职场文书
素质拓展训练感想
2015/08/07 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
Nebula Graph解决风控业务实践
2022/03/31 MySQL
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android