# 3、字符串的扩展及新增方法
# 一、字符串新增了遍历器接口
字符串新增了遍历器接口 《Interator》, 使得字符串可以被 for...of 循环遍历。
for (let ererycode of "foo") {
console.log(ererycode);
}
// "f"
// "o"
// "o"
# 二、新增了模版字符串
传统的 Javascript 中，输出模版通常是下面写法
$(#result).append(
'There are <b>'+basket.count+'</b>'+
'<em>'+basket.data+'</em>'
)
非常的繁琐,新增模版字符串
$(#result).append(
`There are
<b>${basket.count}</b>
<em>${basket.data}</em>`
)
// 普通字符串
`in javascript '\n' a line-feed.`// 多行字符串
`in javascript
a line-feed.`;
// 嵌入变量
const data = { a: 1 }`this is ${data.a}`;
// 摸板字符串中如果需要使用反引号，需要加 "\"
let greeting = `\`Yo\` World`;
// 摸板字符串的空格和换行都会保留，可以用trim方法消除
$("#list").html(
`
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim()
);
// 模版字符串中的括号内。可以变量可以运算，甚至调用函数
标签模版
alert`hello`
// 等同于
alert(['hello'])
console.log`1 12 33`
["1 12 33", raw: Array(1)]
应用
“标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容。
let message = SaferHTML`<p>${sender} has sent you a message.</p>`;
function SaferHTML(templateData) {
let s = templateData[0];
for (let i = 1; i < arguments.length; i++) {
let arg = String(arguments[i]);
// Escape special characters in the substitution.
s += arg
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">");
// Don't escape special characters in the template.
s += templateData[i];
}
return s;
}
上面的代码通过 jsx 函数，将一个 DOM 字符串转为 React 对象。你可以在 GitHub 找到 jsx 函数的具体实现。
jsx`
<div>
<input
ref='input'
onChange='${this.handleChange}'
defaultValue='${this.state.value}' />
${this.state.value}
</div>
`;
# 三、新增的字符串方法
# 1. 实例方法：includes(), startsWith() , endsWith()
传统 JavaScript 只有 indexof 方法，；来判断一个字符串是否包含在另一个字符串中，现在 ES6 又提供了三种新方法。
- includes(): 返回参数字符串
- startsWith(): 返回布尔，表示参数字符串是否在原子符的头部
- endsWith(): 返回布尔值，表示字符串是否在原字符的尾部。
这三个方法都支持第二个参数，表示从弟 n 个开始搜索的位置。endsWith的行为与其他两个方法有所不同。它针对前n个字符
let s = "Hello world!";
s.startsWith("world", 6); // true
s.endsWith("Hello ", 6); // true
s.includes("Hello", 6); // false
# 2. 实例方法：repeat()
repeat方法返回一个新的字符串，表示将原来的字符串重复了 n 次
"hello ".repeat(2); // "hello hello "
# 3. 实例方法：padStart(),padEnd()
ES2017 中引入了字符串补全功能，如果字符串长度不够指定长度，会在头部或者尾部补全
"x".padStart(4, "ab"); // abax
"x".padEnd(4, "ab"); // xaba
常见用法
(1) 为数值补全指定位数
'12'.padStart(10,'0') // 0000000012
(2) 提示字符串格式
'09-12'.padStart(10,'YYYY-MM-DD') // "YYYY-09-12"
# 4.实例方法：trimStart()，trimEnd()
ES2019 对字符串新增了trimStart()和trimEnd 他们的行为和 trim()一致，前者消除字符串头部空格，后者消除字符串尾部空格，返回的都是新的字符串，不会修改原始字符串。对尾部的 tab 和换行符也有效
const s = ' abc ';
s.trim() // 'abc'
s.trimStart() // 'abc '
s.trimEnd() // ' abc'
结合repeat()使用
const str = "hello "
str.repeat(3).trimEnd() // "hello hello hello"