四,ES6给string带来的一些特性

    xiaoxiao2021-03-25  94

    新特性-模板字符串:

    传统的字符串拼接:

    var    name="老沙";

    var   age=200;

    var    str="唐僧的徒弟+name+'现在已经'+age+‘了’";

    这种写法也没什么不好的,只是有很多引号  和加好,来看一下新特性写法

    var    name="老沙";

    var   age=200;

    var    str=`唐僧的徒弟${name}现在已经${age}了`

    可以看到新的写法没有用到引号,而是把变量放到${}里面即可;

    使用时要注意的一些地方:

    1,可以定义多行字符串;

    传统写法:

    var str ="hello my baby,"+

    "i love you";

    输出:

    hello my baby,i love you

    模板字符串的写法:

    var   str=`hello my baby,

    i love you`;

    输出:

    hello my baby,

    i love you//显示2行

    可以看出,新写法会保留字符串里的缩进和空格

    2,${}里面可以放任何的JavaScript表达式;

    var   a=10;

    var   b=20;

    var   c=`合计:${a*b}`; //合计:200

    3,${}里面可以是对象的属性;

    var    obj={"a":1,"b":2};

    var    num=`合计:${obj.a+obj.b} //合计:3

    4,${}里面可以是函数的调用;

    function   demo(){return 3};

    let    str=`result is ${demo()}`;

    新特性-标签模板;

    这里的模板指的是上面讲的字符串模板,用反引号定义的字符串;而标签,则指的是一个函数,一个专门处理模板字符串的函数。

        var name = "张三";

        var height  = 1.8;     tagFn`他叫${name},身高${height}米。`; //标签+模板字符串     //定义一个函数,作为标签

        function tagFn(arr,v1,v2){

            console.log(arr); 

            //结果:[ "他叫",",身高","米。" ]

            console.log(v1); 

            //结果:张三

            console.log(v2); 

            //结果:1.8

        }

     以上代码有两处要仔细讲解的,首先是tagFn函数,是我们自定义的一个函数,它有三个参数分别是arr,v1,v2。

    函数tagFn的调用方式跟以往的不太一样,以往我们使用括号( )表示函数调用执行,

    这一次我们在函数名后面直接加上一个模板字符串,如下面的代码:

    tagFn`他叫${name},身高${height}米。`; 这样就是标签模板,你可以理解为标签函数+模板字符串,这是一种新的语法规范。 接下来我们继续看函数的3个参数,从代码的打印结果我们看到它们运行后对应的结果,arr的值是一个数组:[ "他叫" ,  ",身高"  ,  "米。" ],

    而v1的值是变量name的值:“张三”,v2的值是变量height的值:1.8。

     你是否看出规律了:第一个参数arr是数组类型,它是内容是模板字符串中除了${ }以外的其他字符,按顺序组成了数组的内容,所以arr的值是[ "他叫",  ",身高"  ,  "米。" ];

    第2,3个参数则是模板字符串中对应次序的变量name和height的值

    新特性-repeat函数

    repeat()函数,将目标字符串重复n次,返回一个新的字符串,不影响目标字符串;

    var  name="老沙"

    var  name1=name.repeat(3);

    console.log(name) //老沙

    console.log(name1) //老沙老沙老沙

    新特性-includes()函数

    判断字符串中是否含有指定子字符串,返回true表示有,返回false 表示没有,第二个参数选填,表示开始搜索的位置,默认是0;

    var   str="孙悟空";

    str.includes("空") //true

    str.includes("爱") //false

    str.includes("孙",1) //false 从第二个字符开始搜索,没有搜到,所以是false;

    新特性-startsWith()函数

    startsWith( )函数:判断指定的子字符串是否出现在目标字符串的开头位置,第二个参数选填,表示开始搜索的位置。

    var name = "abc";  //目标字符串     name.startsWith('a'); 

        //true,出现在开头位置     name.startsWith('b'); 

        //false,不是在开头位置     name.startsWith('b',1); 

        //true,从第2个字符开始

    新特性-endsWith()函数

    判断子字符串是否出现在目标字符串的尾部位置,第二个参数选填,表示针对前N个字符

       var name = "我就是孙悟空";    //目标字符串     name.endsWith('我');

        //false,不在尾部位置

        name.endsWith('空'); 

        //true,在尾部位置

        name.endsWith('空',5); 

        //false,只针对前5个字符

        name.endsWith('空',6);

        //true,针对前6个字符

    新特性-codePointAt函数

     javascript中,一个字符固定为2个字节,对于那些需要4个字节存储的字符,javascript会认为它是两个字符,此时它的字符长度length为2。如字符:"

    转载请注明原文地址: https://ju.6miu.com/read-24575.html

    最新回复(0)