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

缺点 :

  • 并不是真正意义上的多行字符串, 如果想要真正的多行，需要自己加\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的一部分(我并没有研究规范，这句话是从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(‘\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；如果你无法解决压缩器的问题，使用反斜线连接吧，每行只需要加一个字符。

时间： 2024-10-07 05:50:06

js中的字符串的相关文章

JS中实现字符串和数组的相互转化

早上起来看了一道JS的面试题,是这样描述的:利用var s1=prompt("请输入任意的字符串","")可以获取用户输入 的字符串,试编程将用户输入的字符串"反转",并且将字符串输出. 想了一下,字符串对象的方法中并没有实现反转的,但是数组中有,于是考虑了字符串和数组的相互转换问题. JS中的内置对象中包括字符串对象(String)和数组对象(Array),这两个对象是可以通过它们对象的方法实现相互 转化的.对于String对象,提供了对字符串

JS中把字符串转成JSON对象的方法

在JS中,把 json 格式的字符串转成JSON对象,关键代码 json = eval('('+str+')'); <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

js中数组字符串相关

1.字符串转数组 var s = "abc,abcd,aaa";ss = s.split(",");// 在每个逗号(,)处进行分解. 2.数组转字符串 var a, b;a = new Array(0,1,2,3,4);b = a.join(","); 3.查询数组中是否包含某元素 var num=jQuery.inArray(value, array); 解释:返回value在数组中的位置,从0开始计数(如果没有找到则返回 -1 ). 4.j

JS 中数组字符串索引和数值索引研究

先来看一个问题: var array = []; array["a"] = "hello"; array["b"] = "world"; array["c"] = "yes"; console.log("length: " + array.length);//0 在之前看过的许多javascript书籍中,都宣称js是可以使用字符串作为数组下标的,因此我在用的时候也没

关于js中的字符串方法和数组方法总结

最近学习进度很紧张,每天要吸收的知识很多,对于之前学习过的知识有点淡忘,为了巩固之前的所学知识,总结一篇关于字符串和数组的方法. 关于字符串的知识总结 str.charAt(position):找到指定索引位置的字符,找到了返回那一位字符,没找到,返回空字符,返回值是string str.charCodeAt(position):找到指定索引位置字符的unicode码,找到了返回该字符的Unicode码,没找到返回NAN,返回值number String.fromCharCode(Unicode

node.js中的字符串、对象和json处理函数

querystring.parse() 将字符串转成对象,就是把url上带的参数串转成数组对象. querystring.parse(str, [sep], [eq], [options]) 接收参数: str 欲转换的字符串 sep 设置分隔符,默认为 ‘&' eq 设置赋值符,默认为 ‘=' [options] maxKeys 可接受字符串的最大长度,默认为1000 querystring.parse('foo=bar&baz=qux&baz=quux&corge')

js 中有关字符串的操作

1. substring(start, end) 1). 包头不包尾 2). start 必需项 3). end 非必需项 4). start end 谁大谁小无所谓 5). start end 若为 NAN/负数 时,则替换为 0 6). start end 均是从索引 0 算起的 7). 截取的子串长度为 |start-end| (绝对值) 8). end 不指定数值,返回从 start 到 原串末尾 的子串 var str="javaScript"; console.log(st

js中json字符串转成js对象

json字符串转成js对象我所知的方法有2种: //json字符串转换成json对象 var str_json = "{name:'liuchuan'}"; //json字符串 //1. 函数对象构造定义 var obj1 = new Function("return " + str_json)(); console.log(obj1.name); //2. eval函数 var obj2 = eval("(" + str_json + &quo

js中对字符串操作的常见方法(1)

String类型 创建一个String类型的实例 var stringObject = new String("hello world"); String类型的属性 length;// 字符串的长度 注意:即使字符串包含双字节字符,这种双字节字符也算为一个字符 valueOf(), toLocaleString(), toString() // 继承的`valueOf()`,`toLocaleString()`,`toStirng()`方法,都会返回对象所表示的基本类型字符串值. ch