[TOC]
字符串语法
快速将一个字符串转为数组
- 扩展运算符
- Array.from
- split
const str = 'hello';
console.log([...str]); // [ 'h', 'e', 'l', 'l', 'o' ]
console.log(Array.from(str)); // [ 'h', 'e', 'l', 'l', 'o' ]
1
2
3
2
3
模板字符串
模板字符串作用：简化字符串的拼接。
- 模板字符串必须用反引号(``)包裹；
- 变化的部分需要使用${xxx}定义。
基础用法：
const msg = `hello world`;
console.log(msg);
1
2
2
使用需要转义的字符：
const msg = `hello \` world`;
console.log(msg); // hello ` world
1
2
2
需要注意的是，在模板字符串中，空格、缩进、换行都会被保留：
const tpl = `
<ul>
<li>1</li>
<li>2</li>
</ul>
`;
console.log(tpl);
1
2
3
4
5
6
7
2
3
4
5
6
7
结果如下：打印结果中的第一行是一个换行，可以使用trim函数消除换行。
<ul>
<li>1</li>
<li>2</li>
</ul>
1
2
3
4
5
6
2
3
4
5
6
再来看一个例子：
const person = {
name: 'lisi',
age: 12,
hobbies: [
{name: '吃饭'},
{name: '睡觉'},
{name: '打豆豆'}
]
};
const template = `
<ul>
${person.hobbies.map(({name}) => {
return `
<li>${name}</li>
`;
}).join('')}
</ul>
`;
document.body.innerHTML = template;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
注意，在li标签中间多了一个逗号，这是因为当大括号中的值不是字符串时，会将其转为字符串，比如一个数组[1, 2, 3]就会被转为 1,2,3，逗号就是这样产生的。
map方法生成的元素之间会有逗号，因此需要使用join('')方法处理下。通过上述例子可以看到：模板字符串是可以嵌套使用的。此外，在模板字符串中也可以使用三元运算符和函数调用。
在模板字符串中定义html结构
const template = `
<div class="box">
<p>Hello</p>
</div>
`;
1
2
3
4
5
2
3
4
5
需要注意：模板字符串中定义的html结构会保留对应的空格，可以通过trim方法来去除空格。
const template = `
<div class="box">
<p>Hello</p>
</div>
`.trim();
1
2
3
4
5
2
3
4
5
标签模板字符串
模板标签是一个非常重要的能力，模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串，举个例子：
const info = {
name: 'AaDerBrane',
city: 'GungZhou'
};
console.log(printf(str, info)); // My name is AaDerBrane, I am from GungZhou
function format(literals, ...values) {
console.log(literals); // [ 'My name is ', ', I am from ', '' ]
console.log(values); // [ 'AaDerBrane', 'GungZhou' ]
let msg = '';
for (let i = 0; i < values.length; i++) {
msg += literals[i];
msg += values[i];
}
msg += literals[literals.length - 1];
return msg;
}
function printf(str, info) {
const {name, city} = info;
const res = format`My name is ${name}, I am from ${city}`;
return res;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
format函数采用reduce改造：
function format(literals, ...values) {
const result = literals.reduce((prev, next, i) => {
let value = values[i - 1];
return prev + value + next;
});
return result;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.highlight {
color: aquamarine;
font-size: 32px;
}
</style>
</head>
<body>
<script>
function highlight(strings, ...values) {
const highlighted = values.map(value => `<span class="highlight">${value}</span>`);
// let str = '';
// strings.forEach((string, index) => {
// str += `${string}${highlighted[index] || ''}`;
// });
// return str;
return strings.reduce((pre, cur, index) => {
return `${pre}${cur}${highlighted[index] || ''}`;
}, '');
}
// 标签模板字符串
const name = 'lisi';
const age = 12;
const info = highlight`${name} is ${age} old`;
document.body.innerHTML = info;
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
标签模板字符串应用
yarn add dompurify
1
基于dompurify第三方库来实现对html中存在xss攻击的非法字符串进行过滤。
通过img标签的onload事件来触发js脚本的执行，从而达到xss攻击的目的。
字符串语法扩展
- includes(str): 判断是否包含指定的字符串
- startsWith(str): 判断是否以指定字符串开头
- endsWith(str): 判断是否以指定字符串结尾
- repeat(count): 重复指定次数
需要注意：includes/startsWith/endsWith三个方法都是大小写敏感的。
const str = 'test';
console.log(str.startsWith('t')); // true
console.log(str.endsWith('a')); // false
console.log(str.includes('b')); // false
console.log(str.repeat(2)); // testtest
1
2
3
4
5
2
3
4
5
const id = 'abcdefghijklmn';
const name = 'lisi';
// 实现字符串左右对齐
function padder(string, length = 30) {
return `${string}${' '.repeat(Math.max(length - string.length, 0))}`;
}
console.log(padder(id));
console.log(padder(name));
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10