字符串的改进
es5 trim() 去除空格
const str_1 = ' a ';// 未改变
const str_2 = str_1.trim();// a
let str_3 = ' b ';//未改变
const str_4 = str_3.trim();// b
1.includes()、startsWith()、endsWith()
JavaScript 引入indexOf() 方法来确认字符串是否存在于其它字符串中。
es6引入三个方法
- includes()方法会在给定文本存在于字符串中的任意位置时返回 true,否则返回 false 。
- startsWith()方法会在给定文本出现在字符串开头时返回 true,否则返回 false 。
- endsWith()方法会在给定文本出现在字符串末尾时返回 true,否则返回 false 。
- indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
每个方法都接收两个参数:需要搜索的文本和可选的起始索引值。当提供第二个参数后,includes() 和 startsWith() 会以该索引为起始点进行匹配,而 endsWith() 将字符串的长度与参数值相减并将得到的值作为检索的起始点。若第二个参数未提供,includes() 和 startsWith() 会从字符串的起始中开始检索,endsWith() 则是从字符串的末尾。实际上,第二个参数减少了需要检索的字符串的总量。
const str = 'hello world!';
console.log(str.startsWith("hello")); // true
console.log(str.endsWith("!")); // true
console.log(str.includes("o")); // true
console.log(str.startsWith("o")); // false
console.log(str.endsWith("world!")); // true
console.log(str.includes("x")); // false
console.log(str.startsWith("o", 4)); // true
console.log(str.endsWith("o", 8)); // true
console.log(str.includes("o", 8)); // false
console.log(str.indexOf('o')); // 4
console.log(str.indexOf('0')); // -1
console.log(str.indexOf('o',1)); // 4
console.log(str.indexOf('o',6)); // 7
console.log(str.lastIndexOf('o')); // 7
console.log(str.lastIndexOf('0')); // -1
console.log(str.lastIndexOf('o',1)); // -1
console.log(str.lastIndexOf('o',6)); // 4
注意: 向 startsWith(),endsWith(),和 includes() 方法传入正则表达式会抛出错误,这和 indexOf() 与 lastIndexOf() 的表现相反,它们会将正则表达式转换为字符串并搜索它。
2.repeat()
- repeat()该方法返回一个重复包含初始字符串的新字符串,重复次数等于参数。
该方法在同类中最为便利,在操作文本的场景中特别实用。
// 使用指定的数字添加空格缩进
const indent = " ".repeat(4),
let indentLevel = 0;
// 增加缩进
const newIndent = indent.repeat(++indentLevel);
模板字面量
下面的所有方法在es6之前都不能使用。
“来包含字符串。
基本用法
const str = `hello world!`;
console.log(str); // "hello world!"
console.log(typeof str); // "string"
console.log(str.length); // 12
使用转义字符,模板字面量中无需转义单双引号。
const str = '\`o\`';
console.log(str); // `o`
终于解决了多行字符串的问题,手动点赞。
const message = `hello
word`;
console.log(message); // "hello
// word"
console.log(message.length); // 10
反引号中的空白符都是字符串的一部分
let message = `Multiline
string`;
console.log(message); // "Multiline
// string"
console.log(message.length); // 31
字符串置换
置换部分由${}包含,其中可以放任意javascript表达式。
const count = 10,
price = 0.2, // 还有这种操作?用,分割
counts = `$${(price * count).toFixed(2)}`
console.log(counts); // $2.00
模板标签
模板字面量的真正强大之处在于模板标签,一个模板标签可以被转换为模板字面量并作为最终值返回。标签在模板的头部,即左 ` 字符之前指定。
定义标签(笔者一脸懵逼,之所以懵是不知道这个有什么作用)
function tag(literals, ...substitutions) {
// 返回一个字符串
literals.forEach(element => {
console.log(element);
});
substitutions.forEach(element => {
console.log(element);
});
}
const message = tag`${count} 看一下 ${(price * count).toFixed(2)}` // (空格)
// (空格)看一下(空格)
// (空格)
// 10
// 2.00
console.log(message); // undfined
顺便看一下这些都是什么鬼东西。
emmm发生了什么事?这就是笔者比较懵的地方,这就是为什么说tag是一个函数,这个函数的参数是不固定的,依据你要处理的模板数量。
- literals 用来接收置换位置之外的字符串,是一个数组。
- substitution 用来接收置换的字面量,个数和置换位置个数相同。
literals 的首个元素为空字符串,以保证 literals[0] 总是代表字符串的起始位置,正如 literals[literals.length - 1] 涵盖字符串的末尾。同时置换(substitution)元素数目也总是比字面量(literal)元素少 1,意味着表达式 substitutions.length === literals.length - 1 的值总是为 true 。
模板标签就是一个处理“中字符串的一个函数,具体应用是处理字符串。
使用string.raw()可以达到同样的效果。
let message1 = `Multiline\nstring`,
message2 = String.raw`Multiline\nstring`;
console.log(message1); // "Multiline
// string"
console.log(message2); // "Multiline\\nstring"
使用目标标签模仿raw
function raw(literals, ...substitutions) {
let result = "";
// 只根据 substitution 的数目来运行循环
for (let i = 0; i < substitutions.length; i++) {
result += literals.raw[i]; // use raw values instead
result += substitutions[i];
}
// 添加最后一个 literal
result += literals.raw[literals.length - 1];
return result;
}
let message = raw`Multiline\nstring`;
console.log(message); // "Multiline\\nstring"
console.log(message.length); // 17
看来模板标签有比较特殊的应用场景。