ES6学习笔记（字符串扩展）

比眉伴天荒 2022-05-17 09:23 239阅读 0赞

#### 1.模板字符串 ####

模板字符串的优点在于对长串的字符串进行处理时，不需要使用多个引号去进行处理，只需要在最外层使用间隔号\`，中间所有的变量使用$\{\}则可进行替换  
先举一个简单的例子：

const xiaoming = {
        name: '小明',
        age: 14,
    
        //传统的拼接字符串用法
        say1: function () { 
            console.log('我叫' + this.name + '，我今年' + this.age +'岁！');   
        },
    
        //模板字符串用法
        say2:function () { 
            console.log(`我叫 ${
       this.name}，我今年${
       this.age}岁！`);
        }
    }

这样对比，优势还不是很明显，我们再举一个复杂点的例子：  
比如，我要处理这样一串字符串：

const getList = function() { 
    
        return {
            status: true,
            msg: '获取成功',
            data: [{
                id: 1,
                title: 'Vue 入门',
                date: '入门'
            }, {
                id: 2,
                title: 'ES6 入门',
                date: '进阶'
            }, {
                id: 3,
                title: 'React入门',
                date: '6P6P'
            }]
        }
    };

我要遍历它，并以列表的形式在页面上进行打印，如果使用传统的写法，可能得写成这样:

const {data:listData,status,msg} = getList();
 if (status){
 let arr = [];
 listData.forEach(function ({date,title}) { 
 arr.push(
 '<li>\ ' + title + '' +
 '' + date + '' +
 '</li>'
 );
 });
 
 let ul = document.createElement('ul');
 ul.innerHTML = arr.join('');
 
 document.body.appendChild(ul);
 
 } else {
 alert(msg);
 }

在如下部分，需要使用多个引号、加号以及转义字符，在手动编辑的时候，很容易出错

'<li>\
 ' + title + '' +
 '' + date + '' +
 '</li>'

如果换成模板字符串，只需要最外层使用间隔符号，里面对应的变量可以直接引用

`
 <li>
 ${`课程名： ${title}`}
 ${date}
 </li>
 `

#### 2. 字符串的部分新方法 ####

###### padStart和padEnd ######

作用是在原有字符串之前或之后，使用新字符串进行填补

{
        let str = 'i';
        let str1 = str.padStart(5,'test');
        let str2 = str.padEnd(5,'test');
        console.log(str1);   //打印结果 teseti
        console.log(str1);   //打印结果 itest
    }

###### repeat ######

{
        console.log('i'.repeat(10));  //打印结果 iiiiiiiiii
    }

###### startsWith和endsWith ######

判断字符串是否以某串字符为开头或结尾

{
        const str = 'abcd efg';
    
        console.log(str.startsWith("a"));    //结果为true
        console.log(str.startsWith("ab"));    //结果为true
        console.log(str.endsWith("g"));    //结果为true
        console.log(str.endsWith("fg"));    //结果为true
    
        console.log(str.startsWith("b"));    //结果为false
        console.log(str.endsWith("f"));    //结果为false
    }

#### 3. for-of的使用 ####

ES6之前，遍历字符串一般有以下的形式：

###### 使用for循环 ######

let str = 'STRING';
 for (var i = 0 ; i < str.length ; i++){
 console.log(str[i]);
 console.log(str.charAt(i));
 }

###### 转成数组后遍历 ######

let str = 'STRING';
    // var oStr = Array.prototype.slice.call(str);
    // var oStr = str.split('');
    // const oStr = [...str];
    const [...oStr] = str;  //以上4种方式都可以将字符串转为数组
    
    oStr.forEach(function (word) {
        console.log(word);
    })

在ES6中可以直接使用for of，具体写法如下：

let str = 'STRING';
    for (let word of str){
        console.log(word);
    }