JavaScript 输入多个数据 js多行输入

转载

IT剑客之家 2023-10-03 06:44:23

文章标签 JavaScript 输入多个数据字符串 chrome html 文章分类 JavaScript 前端开发

JS里并没有标准的多行字符串的表示方法，但是在用模板的时候，为了保证模板的可阅读性，我们又不可避免的使用多行字符串，所以出现了各种搞法，这里以一段jade的模板作为示例，简单总结和对比一下。

字符串相加

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

1 var tmpl =''+
 2     '!!! 5' +
 3     'html' +
 4     '  include header' +
 5     '  body' +
 6     '    //if IE 6' +
 7     '        .alert.alert-error' +
 8     '            center 对不起，我们不支持IE6，请升级你的浏览器' +
 9     '                a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载' +
10     '                a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载' +
11     '    include head' +
12     '    .container' +
13     '        .row-fluid' +
14     '            .span8' +
15     '                block main' +
16     '                include pagerbar' +
17     '            .span4' +
18     '                include sidebar' +
19     '    include footer' +
20     '    include script'

优点:

易理解，简单，可靠
足够灵活，可以在单个字符串中添加js逻辑

缺点 :

并不是真正意义上的多行字符串, 如果想要真正的多行，需要自己加\n
大量的+号看上去满天星,大量的'和", 丑陋

反斜线

这个叫续行符, 这个并非一种很常见的方式, 但是一旦用上了，还是很容易上瘾，只需要加一个字符

1 var tmpl ='\
 2     !!! 5\
 3     html\
 4       include header\
 5       body\
 6         //if IE 6\
 7             .alert.alert-error\
 8                 center 对不起，我们不支持IE6，请升级你的浏览器\
 9                     a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载\
10                     a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载\
11         include head\
12         .container\
13             .row-fluid\
14                 .span8\
15                     block main\
16                     include pagerbar\
17                 .span4\
18                     include sidebar\
19         include footer\
20         include script'

优点:

简单,每一行只需要有多一个\
高效！在大部分的浏览器上，这种方式都是最快的，看这个效率对比

缺点 :

致命缺陷，每一行的\必须不可以有空格，否则直接脚本错误
并不是真正意义上的多行字符串, 如果想要真正的多行，需要自己加\n
尽管绝大部分的js引擎都支持它，但是它并不是ECMAScript的一部分(我并没有研究规范，这句话是从google的编码规范翻译过来的)

字符串数组join

1 var tmpl = [
 2     '!!! 5' ,
 3     'html' ,
 4     '  include header' ,
 5     '  body' ,
 6     '    //if IE 6' ,
 7     '        .alert.alert-error' ,
 8     '            center 对不起，我们不支持IE6，请升级你的浏览器' ,
 9     '                a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载' ,
10     '                a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载' ,
11     '    include head' ,
12     '    .container' ,
13     '        .row-fluid' ,
14     '            .span8' ,
15     '                block main' ,
16     '                include pagerbar' ,
17     '            .span4' ,
18     '                include sidebar' ,
19     '    include footer' ,
20     '    include script'].join('\n');

优点:

真正意义上的多行字符串
易理解，简单，可靠
足够灵活，可以在单个字符串中添加js逻辑

缺点 :

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

String.prototype.concat

1 var tmpl = String.prototype.concat.call(
 2     '!!! 5' ,
 3     'html' ,
 4     '  include header' ,
 5     '  body' ,
 6     '    //if IE 6' ,
 7     '        .alert.alert-error' ,
 8     '            center 对不起，我们不支持IE6，请升级你的浏览器' ,
 9     '                a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载' ,
10     '                a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载' ,
11     '    include head' ,
12     '    .container' ,
13     '        .row-fluid' ,
14     '            .span8' ,
15     '                block main' ,
16     '                include pagerbar' ,
17     '            .span4' ,
18     '                include sidebar' ,
19     '    include footer' ,
20     '    include script');

优点:

不常用，事实上字符串的concat方法远没有+号常见
易理解，简单，可靠
足够灵活，可以在单个字符串中添加js逻辑

缺点 :

并不是真正意义上的多行字符串
大量的,号和'、", 丑陋

heredoc

这是一种很有技巧的解决办法, 利用了function的toString方法

1 function heredoc(fn) {
 2     return fn.toString().split('\n').slice(1,-1).join('\n') + '\n'
 3 }
 4 
 5 var tmpl = heredoc(function(){/*
 6     !!! 5
 7     html
 8       include header
 9       body
10         //if IE 6
11             .alert.alert-error
12                 center 对不起，我们不支持IE6，请升级你的浏览器
13                     a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载
14                     a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载
15         include head
16         .container
17             .row-fluid
18                 .span8
19                     block main
20                     include pagerbar
21                 .span4
22                     include sidebar
23         include footer
24         include script
25  */});

优点:

模板字符串内不必写多余的任何字符，干净，简单
真正意义上的多行字符串, 有\n哦

缺点 :

不可以在单个字符串中添加js逻辑
容易被压缩器压缩掉，yui compressor可以通过/*!来避免被压缩掉，uglifyjs和gcc也可以通过选项配置不删除特定的注释，这个不是大问题

coffeescript

相当于换了一个语言，其实这种语言上缺少的功能，通过coffeescript这种以js为编译目标的语言来实现是一种非常棒的选择。

1 var tmpl = """ 
 2     !!! 5
 3     html
 4       include header
 5       body
 6         //if IE 6
 7             .alert.alert-error
 8                 center 对不起，我们不支持IE6，请升级你的浏览器
 9                     a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载
10                     a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载
11         include head
12         .container
13             .row-fluid
14                 .span8
15                     block main
16                     include pagerbar
17                 .span4
18                     include sidebar
19         include footer
20         include script
21     """

优点:

易理解，简单，可靠

缺点 :

需要了解coffeescript
整个文件都需要用coffeescript来写

ES6

ES6的有一个新的特性，Template Strings, 这是语言层面上第一次实现了多行字符串, 在chrome canary里打开Enable Experimental JavaScript就可以使用这个特性，另外typescript也会支持这种方式

1 var tmpl = 
 2    `!!! 5
 3     html
 4       include header
 5       body
 6         //if IE 6
 7             .alert.alert-error
 8                 center 对不起，我们不支持IE6，请升级你的浏览器
 9                     a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载
10                     a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载
11         include head
12         .container
13             .row-fluid
14                 .span8
15                     block main
16                     include pagerbar
17                 .span4
18                     include sidebar
19         include footer
20         include script`

优点: