字符串新增特性

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() 判断字符串中包含指定的值,并根据情况返回 truefalse
repeat() 返回一个新字符串,将字符串重复指定次数。
startsWith() 判断字符串以指定的值开头,并根据情况返回 truefalse
endsWith() 判断字符串以指定的值结尾,并根据情况返回 truefalse

results matching ""

    No results matching ""