zoukankan      html  css  js  c++  java
  • js中的字符串

    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逻辑

    缺点 :

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

    反斜线

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

    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引擎都支持它,但是它并不是ECMAScript的一部分(我并没有研究规范,这句话是从google的编码规范翻译过来的)

    字符串数组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('
    ');

    优点:

    • 真正意义上的多行字符串
    • 易理解,简单,可靠
    • 足够灵活,可以在单个字符串中添加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('
    ').slice(1,-1).join('
    ') + '
    '
    }
    
    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
     */});

    优点:

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

    缺点 :

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

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

  • 相关阅读:
    Codeforces 1485C Floor and Mod (枚举)
    CodeForces 1195D Submarine in the Rybinsk Sea (算贡献)
    CodeForces 1195C Basketball Exercise (线性DP)
    2021年初寒假训练第24场 B. 庆功会(搜索)
    任务分配(dp)
    开发工具的异常现象
    Telink MESH SDK 如何使用PWM
    Telink BLE MESH PWM波的小结
    [LeetCode] 1586. Binary Search Tree Iterator II
    [LeetCode] 1288. Remove Covered Intervals
  • 原文地址:https://www.cnblogs.com/jiechen/p/4708748.html
Copyright © 2011-2022 走看看