【JavaScript】ES6 字符串的扩展

ES5 字符串及常用方法

字符串模版

• ES5 中，字符串通常使用 + 拼接

let name = "superman";
let age = 18;
let str = "姓名：" + name + "；年龄：" + age + "岁";
console.log(str); // 姓名：superman；年龄：18岁

ES6 中，可以使用字符串模版

• 用 `` 括住，可以随意换行
• 表示多行字符串时，所有的空格和缩进都会被保留在输出之中

let str = `su    per`;
console.log(str.length); // 9

• 模板字符串中嵌入变量时，需要将变量名写在 ${} 内
• 大括号内部可以放入任意的 JavaScript 表达式

let name = "superman";
let age = 18;
let str = `
姓名：${name}；
年龄：${age} 岁
`;
console.log(str);
// 
// 姓名：superman；
// 年龄：18 岁
// 

• 所有插入的值都会使用 toString() 强制转型为字符串
  注意：对象转 string 类型，得到的是 [object Object]

console.log(`${{}}`); // [object Object]

这时，我们可以重写 toString() 方法，以输出我们需要的值

let obj = {
    toString: () => 'World'
};
console.log(`Hello, ${obj}!`); // Hello, World!

• 反引号内可以是任意表达式，当然也可以在里面调用函数

function capitalize(word) {
    return `${word[0].toUpperCase()}${word.slice(1)}`;
}
console.log(`${capitalize('superman')}`); // Superman

标签函数：模版字符串作为实际参数来调用函数

• 会将模板字符串先处理成多个参数，再调用函数
• 处理逻辑：以 ${} 为分界点，将分开的字符串组成数组，为第1参数；剩下的 ${} 内的变量，为后续参数

let name = "superman";
let age = 18;

function output() {
    console.log(arguments);
}

output("姓名：" + name + "；年龄：" + age + "岁"); // { '0': '姓名：superman；年龄：18岁' }
output `姓名：${name}；年龄：${age} 岁`; // { '0': [ '姓名：', '；年龄：', ' 岁' ], '1': 'superman', '2': 18 }

• 可以使用剩余操作符 ... 将 ${} 内的变量收集到一个数组中：

let name = "superman";
let age = 18;

function output(template, ...values) {
    console.log(template, values);
}

output `姓名：${name}；年龄：${age} 岁`; // [ '姓名：', '；年龄：', ' 岁' ] [ 'superman', 18 ]

新增函数

includes()*

是否含有参数字符串，返回布尔值

str.include(substr[, num]);

substr：查询的字符串；num：开始查询的下标，可省略，默认为 0

let str = "apple banana";
console.log(str.indexOf("apple")); // 0

// 从下标为 3 的位置开始查询
console.log(str.includes("apple", 3)); // false

startsWith()

是否以参数字符串为前缀，返回布尔值

str.startsWith(substr[, num]);

substr：查询的字符串；num：开始查询的下标，可省略，默认为 0

let str = "http://www.baidu.com";
str.startsWith("http"); // true
str.startsWith("https"); // false

// 第2参数为开始查询的下标，在此位置上是否以参数字符串开头
str.startsWith("www", 7); // true

endsWith()

是否以参数字符串为后缀，返回布尔值

str.endsWith(substr[, num]);

substr：查询的字符串；num：前几个字符是否以参数字符串结尾

let str = "http://www.baidu.com";
str.endsWith("com"); // true
str.endsWith("cn"); // false

// str 的前16个字符是否是以 'baidu' 结尾的
str.endsWith("baidu", 16); // true

repeat()

重复 num 次 str，num 为重复的次数，不能 < 0

str.repeat(num);

let str = "superman";
let reStr = str.repeat(2);
console.log(reStr); // supermansuperman

参数注意事项：

1. 参数为 NaN 等同于 0，repeat(0) 返回空字符串 ""
2. 参数值可以简单地认为是调用了 parseInt()，即：
   1. 如果参数是字符串，则会隐式转换成数字
   2. 如果参数是正小数，会向下取整
   3. 如果参数在 0 ~ -1 之间，等同于 0
   4. 如果 参数 <= -1 / = Infinity，会报错
      
      

padStart()

• 添加前缀，返回添加后的字符串

str.padStart(num[, pStr]);

num：添加后的长度；pStr：添加的字符串

let str = "su";
let newStr = str.padStart(5, '666per');
console.log(newStr); // 666su

参数注意事项：

1. 如果 str.length >= num，则返回 str
2. 如果 str.length + pStr.length > num，会截去超出的 pStr
3. 默认 pStr = ' ' ( 空格字符串 )

• 我们可以通过 length 属性，添加任意长度的前缀：

let str = "su";
let padStr = "666per"; // 前缀就可以随意改变啦
let newStr = str.padStart(str.length + padStr.length, padStr);
console.log(newStr); // 666persu

padEnd()

• 添加后缀，返回添加后的字符串

str.padEnd(num, pStr);

num：填充后的长度；pStr：用于填充的字符串

let str = "super";
let padStr = "man";
let newStr = str.padEnd(str.length + padStr.length, padStr);
console.log(newStr); // superman