字符串的扩展----ES6学习笔记

程序员文章站 2023-12-21 13:19:46

...

字符串的扩展

1.字符串的遍历器接口

ES6为字符串新增了遍历器接口，使得字符串可以被for…of循环遍历。

字符串的遍历：
for…of与for循环的区别：
for…of可以识别大于0xFFFF的码点，for循环无法识别大于0xFFFF的码点。

 let text = String.fromCodePoint(0x20BB7);
 
  for(let i of text){
      console.log(i);
  }  // ????
 
  for(let i;i<text.length;i++){
      console.log(text[i]);   
  }  
  // " "
  // " "

上面的例子说明了，字符串text只有一个字符，但是for循环会认为它包含两个字符（都不可打印），而for…of循环会正确识别出这一个字符。

2.模板字符串

模板字符串（template string）是增强版的字符串，相比于字符串而言，模板字符串使用更方便，而且用途多。用反引号( ` )标识，可以当成普通字符串使用，还有很多其他用途。
1.充当多行字符串使用。
2.在模板字符串总嵌入变量。( 将变量名写在${}中 )

   普通字符串
    let str1 = `hello world`;
    //str1 "hello world"

   多行字符串
    let str2 = `hello 
    world`;
    // str2  "hello 
    // world"

   模板字符串中嵌入变量
    let one = 1;
    let str3 = `I am No.${one}`;
    //str3 "I am No.1"

模板字符串使用反引号( ` )标识，如果想在模板字符串中使用反引号( ` ),要在前面加反斜杠( \ )转义。

  let str = `hello \`world\``;
  str  //"hello `world`"

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

  function demo(){
      return "world";
  }
  let str = `hello ${demo()}`;
  str //"hello world"

规则：如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法，将对象转换为字符串。

3.标签模板

模板字符串还有标签模板的功能，它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。

  alert`123`
  // 等同于
  alert(123)

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
如果标签字符串中含有变量，会先将模板字符串处理成多个参数，在调用函数。

  let a = 5;
  let b = 10;

  tag`Hello ${ a + b } world ${ a * b }`;
  // 等同于
  tag(['Hello ', ' world ', ''], 15, 50);

tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。
tag函数的其他参数，都是模板字符串各个变量被替换后的值。由于本例中，模板字符串含有两个变量，因此tag会接受到value1和value2两个参数。

tag函数所有参数的实际值如下。
第一个参数：['Hello ', ’ world ', ‘’]
第二个参数: 15
第三个参数：50

我们可以按照需要编写tag函数的代码。下面是tag函数的一种写法，以及运行结果。

let a = 5;
let b = 10;

function tag(s, v1, v2) {
  console.log(s[0]);
  console.log(s[1]);
  console.log(s[2]);
  console.log(v1);
  console.log(v2);

  return "OK";
}

tag`Hello ${ a + b } world ${ a * b}`;
// "Hello "
// " world "
// ""
// 15
// 50
// "OK"

参考文献：《ECMAScript 6 入门》

字符串的扩展----ES6学习笔记