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

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

1.模板字符串

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

  1. const xiaoming = {
  2.     name: '小明',
  3.     age: 14,
  5.     //传统的拼接字符串用法
  6.     say1: function () { 
  7.         console.log('我叫' + this.name + '，我今年' + this.age +'岁！');   
  8.     },
  10.     //模板字符串用法
  11.     say2:function () { 
  12.         console.log(`我叫 ${
  13.    this.name}，我今年${
  14.    this.age}岁！`);
  15.     }
  16. }

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

  1. const getList = function() { 
  3.     return {
  4.         status: true,
  5.         msg: '获取成功',
  6.         data: [{
  7.             id: 1,
  8.             title: 'Vue 入门',
  9.             date: '入门'
  10.         }, {
  11.             id: 2,
  12.             title: 'ES6 入门',
  13.             date: '进阶'
  14.         }, {
  15.             id: 3,
  16.             title: 'React入门',
  17.             date: '6P6P'
  18.         }]
  19.     }
  20. };

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

  1. const {data:listData,status,msg} = getList();
  2. if (status){
  3.     let arr = [];
  4.     listData.forEach(function ({date,title}) { 
  5.         arr.push(
  6.             '<li>\ <span>' + title + '</span>' +
  7.                 '<span>' + date + '</span>' +
  8.             '</li>'
  9.         );
  10.     });
  12.     let ul = document.createElement('ul');
  13.     ul.innerHTML = arr.join('');
  15.     document.body.appendChild(ul);
  17. } else {
  18.     alert(msg);
  19. }

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

  1. '<li>\
  2.       <span>' + title + '</span>' +
  3.        '<span>' + date + '</span>' +
  4. '</li>'

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

  1. `
  2. <li>
  3.      <span>${`课程名： ${title}`}</span>
  4.      <span>${date}</span>
  5. </li>
  6.  `

2. 字符串的部分新方法

padStart和padEnd

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

  1. {
  2.     let str = 'i';
  3.     let str1 = str.padStart(5,'test');
  4.     let str2 = str.padEnd(5,'test');
  5.     console.log(str1);   //打印结果 teseti
  6.     console.log(str1);   //打印结果 itest
  7. }
repeat
  1. {
  2.     console.log('i'.repeat(10));  //打印结果 iiiiiiiiii
  3. }
startsWith和endsWith

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

  1. {
  2.     const str = 'abcd efg';
  4.     console.log(str.startsWith("a"));    //结果为true
  5.     console.log(str.startsWith("ab"));    //结果为true
  6.     console.log(str.endsWith("g"));    //结果为true
  7.     console.log(str.endsWith("fg"));    //结果为true
  9.     console.log(str.startsWith("b"));    //结果为false
  10.     console.log(str.endsWith("f"));    //结果为false
  11. }

3. for-of的使用

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

使用for循环
  1. let str = 'STRING';
  2. for (var i = 0 ; i < str.length ; i++){
  3.     console.log(str[i]);
  4.     console.log(str.charAt(i));
  5. }
转成数组后遍历
  1. let str = 'STRING';
  2. // var oStr = Array.prototype.slice.call(str);
  3. // var oStr = str.split('');
  4. // const oStr = [...str];
  5. const [...oStr] = str;  //以上4种方式都可以将字符串转为数组
  7. oStr.forEach(function (word) {
  8.     console.log(word);
  9. })

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

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

发表评论

表情：
评论列表 （有 0 条评论，388人围观）

还没有评论，来说两句吧...

相关阅读