字符串的一些扩展
模板字符串
传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法)。
$('#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!
`);
模板字符串(template string)是增强版的字符串,用反引号(`)标识。(原理:正则实现)
如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。
如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。
模板字符串是可以嵌套的
如果需要引用模板字符串本身,在需要时执行,可以写成函数。
let func = (name) => `Hello ${name}!`; func('Jack') // "Hello Jack!"
上面代码中,模板字符串写成了一个函数的返回值。执行这个函数,就相当于执行这个模板字符串了。
使用:
- 可以当作普通字符串使用
- 可以用来定义多行字符串
- 可以用来变量、字符串拼接。在模板字符串中嵌入变量,将变量名写在
${}
之中- 大括号内部可以放入任意的 JavaScript 表达式、使用对象的属性、调用函数
- 如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的
toString
方法。 - 如果模板字符串中的变量没有声明,将报错。
- 大括号内部,就是执行 JavaScript 代码,因此如果大括号内部是一个字符串,将会原样输出。
标签模板
模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。
标签模板其实不是模板,而是函数调用的一种特殊形式。“标签”指的就是函数。
如果模板字符串中没有变量,那么紧跟在后面的模板字符串就是标签/函数的参数。
alert`hello` // 等同于 alert(['hello'])
如果模板字符串中有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。
- 函数的第一个参数是一个数组,该数组的成员是模板字符串中,被
${...}
分割开的部分 - 其他参数,依次是模板字符串中各个变量被替换后的值。
let a = 5; let b = 10; tag`Hello ${ a + b } world ${ a * b }`; // 等同于 tag(['Hello ', ' world ', ''], 15, 50); // 3个参数
- 函数的第一个参数是一个数组,该数组的成员是模板字符串中,被
字符串新增方法
str.includes(str) //是否包含str这个字符串
str.startWith(str) //是否以str开头
str.endWith(str) //是否以str结尾
str.repeat(次数) //循环打印字符串
String.raw`hello world\n` // 该方法往往用于模板字符串的处理,它会将所有变量替换,而且对斜杠进行转义,方便下一步作为字符串来使用。如果原字符串的斜杠已经转义,那么String.raw()会进行再次转义。
// 你通常不需要把它看成一个普通函数,你只需要把它放在模板字符串前面就可以了,而不是在它后面加个括号和一堆参数来调用它,引擎会替你去调用它。