手记

【金秋打卡】第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()对于去除字符串中多余文字中有很大的作用,这几个新增方法对于解决实际需求都是很好的解决办法,需要好好掌握。


0人推荐
随时随地看视频
慕课网APP