4.字符串的扩展

来源:http://es6.ruanyifeng.com/?search=keys&x=0&y=0#docs/string#%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E9%81%8D%E5%8E%86%E5%99%A8%E6%8E%A5%E5%8F%A3

  1. 字符的 Unicode 表示法
  2. 字符串的遍历器接口
  3. 直接输入 U+2028 和 U+2029
  4. JSON.stringify() 的改造
  5. 模板字符串
  6. 实例:模板编译
  7. 标签模板
  8. 模板字符串的限制

1.字符串unicode表示法

ES6 加强了对 Unicode 的支持,允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的 Unicode 码点

"\u0061"
// "a"

但是,这种表示法只限于码点在\u0000~\uFFFF之间的字符。超出这个范围的字符,必须用两个双字节的形式表示。

2.字符串的遍历器接口

ES6 为字符串添加了遍历器接口(详见《Iterator》一章),使得字符串可以被for...of循环遍历

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

4.JSON.stringify() 的改造

根据标准,JSON 数据必须是 UTF-8 编码。但是,现在的JSON.stringify()方法有可能返回不符合 UTF-8 标准的字符串。

5.模板字符串

传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法)。

$('#result').append(
  'There are ' + basket.count + ' ' +
  'items in your basket, ' +
  '' + basket.onSale +
  ' are on sale!'
);

上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。

$('#result').append(`
  There are ${basket.count} items
   in your basket, ${basket.onSale}
  are on sale!
`);

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
$('#list').html(`
  • first
  • second
`);

上面代码中,所有模板字符串的空格和换行,都是被保留的,比如

    标签前面会有一个换行。如果你不想要这个换行,可以使用trim方法消除它。

    $('#list').html(`
    
    • first
    • second
    `.trim());

    大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。

    let x = 1;
    let y = 2;
    
    `${x} + ${y} = ${x + y}`
    // "1 + 2 = 3"
    
    `${x} + ${y * 2} = ${x + y * 2}`
    // "1 + 4 = 5"
    
    let obj = {x: 1, y: 2};
    `${obj.x + obj.y}`
    // "3"
    

    模板字符串之中还能调用函数。

    function fn() {
      return "Hello World";
    }
    
    `foo ${fn()} bar`
    // foo Hello World bar
    

    由于模板字符串的大括号内部,就是执行 JavaScript 代码,因此如果大括号内部是一个字符串,将会原样输出。

    `Hello ${'World'}`
    // "Hello World"
    

    模板字符串甚至还能嵌套。

    const tmpl = addrs => `
      
      ${addrs.map(addr => `
        
      `).join('')}
      
    ${addr.first}
    ${addr.last}
    `;

    上面代码中,模板字符串的变量之中,又嵌入了另一个模板字符串,使用方法如下。

    const data = [
        { first: '', last: 'Bond' },
        { first: 'Lars', last: '' },
    ];
    
    console.log(tmpl(data));
    // 
    //
    //   
    //   
    //
    //   
    //   
    //
    // 
    Bond
    Lars

    如果需要引用模板字符串本身,在需要时执行,可以写成函数。

    let func = (name) => `Hello ${name}!`;
    func('Jack') // "Hello Jack!"
    

    上面代码中,模板字符串写成了一个函数的返回值。执行这个函数,就相当于执行这个模板字符串了。

    其他

    function tag(stringArr, ...values){
      console.log(stringArr) //{a:'1'}
      console.log(values) //[ {b:2},{c:3} ]
    }
    tag({a:'1'},{b:2},{c:3})
    

你可能感兴趣的:(4.字符串的扩展)