es6学习之字符串的改进

字符串的改进

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

看来模板标签有比较特殊的应用场景。