ECMAScript-字符串_qml ecmascript 字符串拼接-优快云博客

本文介绍ES6中新增的字符串遍历接口及模板字符串功能，演示如何使用更简洁的方式处理字符串，提高代码可读性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.ES6遍历字符串接口

1.ES6为字符串新添加了遍历接口

for (let s of 'hello') {
    console.log(s)
}

2.字符串模板
我们在之前要在js字符串中拼接一个变量，可能会用字符串的拼接，类似下边这种写法：

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

这种方式及其不方便，各种引号就能把你绕晕，还好，ES6我们提供了字符串模板，让代码的可维护性更好,不用再为繁琐的拼接字符串而烦恼了。

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

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

alert('124');
等价于
alert`123`;

又比如下面的这个函数调用

let a = 1;
let b = 2;
tag`Hello ${a + b} world ${a * b}tangbaobao${a/b}`;
function tag(param,...str) {
    console.log(param,str);
}
//输出：[ 'Hello ', ' world ', 'tangbaobao', '' ] 3 2 0.5

第一个参数是数组类型，其中包装了没有被替换的字符串，第二个参数是是一个不定长的参数，其中包含了被替换的参数。