字符串新增特性
1. 模板字符串
1.1 什么是模板字符串?
使用反引号定义的字符串,称为模板字符串(template string)。
1.2 相对于使用单引号或双引号定义的字符串,模板字符串有如下特点:
1. 模板字符串中可以直接写换行,适合定义内容比较多且带有换行的内容的字符串
2. 字符串中可以非常方便的嵌套变量或者表达式,将变量或表达式写在 ${} 中
`User ${user.name} is not authorized to do ${action}.`
`${x} + ${y} = ${x + y}`
`foo ${fn()} bar`
`
锄禾日当午
汗滴禾下土
谁知盘中餐
粒粒皆辛苦
`
1.3 标签模板
模板自放醋可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。
func`Hello World`; // 相当于 func(['Hello World']);
const num = 100;
func`Hello${num}`; // 相当于 func(['Hello', ''], 100);
const a = 5,b = 10;
func`Hello ${ a + b } world ${ a * b }`; // 等同与 func(['Hello ', ' world ', ''], 15, 50);
标签模板常见的应用场景有:
① 国际化 - 可以把字符串片段和变量的值传给翻译函数
② 安全的HTML转义 - 可以把嵌入的变量值传给转义函数进行转义3
③ 样式构建 - 可以把字符串片段和变量值传给样式函数构建样式字符串
function highlight(strs) {
let result = strs[0];
for (let i = 1; i < arguments.length; i++) {
result += '<span style="color: red">' + arguments[i] + '</span>';
result += strs[i];
}
return result;
}
let name = '张三'
let age = 20
let str = highlight`我的名字是${name},年龄是${age}岁。`
document.body.innerHTML = str
2 字符串对象新增方法
方法名 | 描述 |
---|---|
includes() | 判断字符串中包含指定的值,并根据情况返回 true 或 false 。 |
repeat() | 返回一个新字符串,将字符串重复指定次数。 |
startsWith() | 判断字符串以指定的值开头,并根据情况返回 true 或 false 。 |
endsWith() | 判断字符串以指定的值结尾,并根据情况返回 true 或 false 。 |