【金秋打卡】第21天字符串的新增方法

一、课程名称：前端工程师2022版

二、课程章节：ES6语法扩展-ES6的新增方法

三、课程讲师：Alex

四、课程内容

1、includes()（重点）

（1）作用：判断字符串中是否含有某些字符

（2）基本用法：

      console.log( "abc".includes("a"));    //true

      console.log( "abc".includes("ab"));    //true

      console.log( "abc".includes("bc"));    //true

      console.log( "abc".includes("ac"));    //false

（3）第二个参数：表示开始搜索的位置，默认是0

      console.log("abc".includes("a")); //true

      console.log("abc".includes("a", 0)); //true

      console.log("abc".includes("a", 1)); //false

2、padStart()和padEnd()

（1）作用：补全字符串长度

（2）基本用法

        console.log('x'.padStart(5,'ab'));  //ababx

        console.log('x'.padEnd(5,'ab'));  //xabab

        console.log('x'.padEnd(4,'ab'));  //xaba

（3）注意事项

1）原字符的长度，等于或大于最大长度，不会消减原字符串，字符串补全不生效，返回原字符串

      console.log("xxx".padStart(2, "ab")); //XXX

      console.log("xxx".padEnd(2, "ab")); //XXX

2）用来补全的字符串与原字符串长度之和超过了最大的长度，截取超出位数的补全字符串，原字符串不动

      console.log('abc'.padStart(10,'0123456789')); //0123456abc

      console.log('abc'.padEnd(10,'0123456789')); //abc0123456

3）如果省略第二个参数，默认使用空格补全长度

      console.log("x".padStart(4)); //   x

      console.log("x".padEnd(4)); //x

（4）应用

显示日期格式

      //  2020-01-01  2020-10-10

      console.log("10".padStart(2, 0)); //10

      console.log("1".padStart(2, 0)); //01

3、trimStart()和trimEnd()

（1）作用：清除首或尾空格，中间的空格不会清除

（2）基本用法

      const s = " a b c ";

      console.log(s); // a b c

      // 清除首部空格

      console.log(s.trimStart()); //a b c

      console.log(s.trimLeft()); //a b c

      // 清除尾部空格

      console.log(s.trimEnd()); // a b c

      console.log(s.trimRight()); // a b c

      // 清除首部和尾部空格

      console.log(s.trim()); //a b c

（3）应用：用于做表单提交前的验证

      const usernameInput = document.getElementById("username");

      const btn = document.getElementById("btn");

      btn.addEventListener(

        "click",

        () => {

          console.log(usernameInput.value);

        //   验证

        if(usernameInput.value.trim() != ''){

            // 可以提交

            console.log('可以提交');

        }else{

            // 不能提交

            console.log('不能提交');

        }

        // 手动提交

        },

        false

      );

4、扩展-replaceAll方法

（1）作用：由于replace()只能替换第一个匹配的内容，如果要替换所有匹配内容，就不得不使用正则表达式的g修饰符，但是这样正则表达式就不是那么方便直观了，引入replaceAll方法，所有匹配到的内容都会被替换

''aabbcc'.replace('b','_');    //'aa_bcc'

''aabbcc'.replace(/b/g,'_');    //'aa__cc'

''aabbcc'.replaceAll('b','_');    //'aa__cc'

（2）语法

    String.prototype.replaceAll(searchValue,replacement);

1）searchValue：搜索模式，可以是一个字符串，也可以是一个全局的正则表达式（带有g修饰符）

2）replacement：替换成的文本，是一个字符串

（3）注意事项

如果searchValue是不带有g修饰符的正则表达式，replaceAll()会报错

（4）应用

去除字符串中多余的文字，如将字符串中的"省"字去除

      const str1 = "广东省，福建省，浙江省，湖南省，河北省，......";

      const str = str1.replaceAll("省", "");

      console.log(str1); //广东省，福建省，浙江省，湖南省，河北省，......

      console.log(str); //广东，福建，浙江，湖南，河北，......

五、课程心得

今天学习了字符串的新增方法，includes对于条件判断、添加网页字符上有很大的作用，padStart()和padEnd()对于补全字符串长度、补全日期等有作用，rimStart()和trimEnd()对于表单提交前的验证有很大的作用，replaceAll()对于去除字符串中多余文字中有很大的作用，这几个新增方法对于解决实际需求都是很好的解决办法，需要好好掌握。