1.模板字符串
(1)基础用法:
let message = `我的模板字符串`
如果你的字符串中要使用`个符号,用\来转义。例子:
let message = `mess/`age`
注:在模板字符串中,空格、缩进、换行都会被保留
如果想要去掉字符串首部的空格,换行,用trim()函数去掉。例子:
let message = ` messge`.trim()
(2)嵌入变量
只需要将变量名写在 ${} 之中,例子:
let a = 1,b = 2;
let massage = `meaa${1}age${2}` // meaa1age2
let x = `${a*2}${b-a}` // 21
let arr = [{value:1},{value:2}]
let message = `
${arr.map((item) => {
return `
${item.value}
`
})}`
// `${arr}`=arr.toString() // 此例子可以展示模板字符串支持嵌套
// (大括号中的值不是字符串,将按照一般的规则转为字符串)
注:大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属
性,调用函数。
(3)标签模板
定义:紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串,是函数调用的 一种特殊形式。
例子:
let x = 'Hi', y = 'Kevin';
var res = message`${x}, I am ${y}`;
function message(literals, value1, value2) {
console.log(literals); // [ "", ", I am ", "" ]
console.log(value1); // Hi
console.log(value2); // Kevin
}
function message(literals, ...values) {
// 用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
let result = '';
for (let i = 0; i < values.length; i++) {
result += literals[i] + values[i];
}
result = literals[0] ;
return result;
}
1.过滤 HTML 字符串,防止用户输入恶意内容
例子:
let sender = '<script>alert("abc")</script>'; // 恶意代码
let message = SaferHTML`<p>${sender} has sent you a message.</p>`;
function SaferHTML(templateData){
let s = templateData[0];
for (let i = 1; i < s.length; i++) {
let arg = String(s[i]);
s += arg.replace(/&/g, "&") // 转义恶意代码 .replace(/</g, "<") .replace(/>/g, ">");
s += templateData[i];
}
return s;
}
message = <p><script>alert("abc")</script> has sent you a message.</p>
2.字符串的新增方法
(1)includes(),startsWith(),endsWith()
用法:
includes()返回布尔值,表示是否找到了参数字符串。
startsWith()返回布尔值,表示参数字符串是否在原字符串的头部。
endsWith()返回布尔值,表示参数字符串是否在原字符串的尾部。
例子:
let s = 'Hello world!'
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true 针对前n个字符
s.includes('Hello', 6) // false
(2)repeat(n)
用法:返回一个新字符串,表示将原字符串重复n次。(n为小数取整,NaN等同于 0,字符串转化为数字,负数报错,-1-0直接等同于0)
(3)padStart(补全后的最大长度,用来补全的参数),padEnd()
用法:字符串补全长度的功能
例子:
'x'.padStart(5, 'ab') // 'ababx' 5是补全后的最大长度 如没有第二个参数,用空格来补
'x'.padEnd(5, 'ab') // 'xabab' 如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。
用于的场景:
1.为数值补全指定位数。
2.提示字符串格式:'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
(4)trimStart(),trimEnd()
用法:消除字符串头或者尾的空格( tab 键、换行符等不可见的空白符号也有效)。 返回的都是新字符串,不会修改原始字符串
(5)matchAll()
用法:返回一个正则表达式在当前字符串的所有匹配