ES6:字符串,数组,数值的扩展

本文深入探讨了ES6带来的各种新特性,包括模板字符串、数组和数值操作的新方法,如padStart、padEnd、find、findIndex、includes、repeat、from、trunc和sign等,以及如何使用这些特性提升代码效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.字符串的拓展

1.模板字符串 ``

   let name = `我是模板字符串`;
    console.log(name);

2.模板字符串引用变量

 let name = `康家豪"`;
    let sayHello =  `我的名字叫${name}`;
    console.log(sayHello);

3.模板字符串可以换行

  let result = {
        name:'张三',
        age:20
    };

    let html = `
        <div>
            <span>${result.name}</span>
            <span>${result.age}</span>
        </div>
    `
    console.log(html);

4.模板字符串可以调用函数

   const sayHello = function(){
        return 'xiyounet';
    };

    let greet = 
    `
        ${sayHello()} 11:11 19:30
    `
    console.log(greet);  // xiyounet 11:11 19:30

5.字符串新增方法

includes() 判断字符串是否含有某个字符串片段
    let str  = `i love xiyounet `;
    var result = str.includes('love');
    console.log(result);  //true
startWith() 判断字符串是否以某个字符串开头
endWith() 判断字符串是否以某个字符串结尾
    let str = "2019 xiyounet abc 0000";
    var result1 = str.startsWith('2019');
    var result2 = str.endsWith('0000');

    console.log(result1, result2); //true  true

6.repeat方法返回一个新字符串,表示将原字符串重复n次。

 let str = `xiyounet`;
    console.log(str.repeat(3));  //xiyounetxiyounetxiyounet

    //小数取整
    console.log(str.repeat(1.8));  //xiyounet

    //如果repeat的参数是负数或者Infinity,会报错。
    console.log(str.repeat(-1));   //ReferenceError
    console.log(str.repeat(Infinity));  //ReferenceError

7.字符串补全长度 padStart() , padEnd()
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,
会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。


    let str = "xiyounet";
    
    console.log(str.padStart(10,'1'));  //11xiyounet

    console.log(str.padEnd(10,'1'));    //xiyounet11
    上面代码中,padStart()和padEnd()一共接受两个参数,第一个参数是字符
    串补全生效的最大长度,第二个参数是用来补全的字符串。

    如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。
    let str = "xiyounet";
    
    console.log(str.padStart(5,'1')); //xiyounet

    如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串。
    let str = "xiyounet";
    
    console.log(str.padStart(12,'123456789')); //1234xiyounet

    如果省略第二个参数,默认使用空格补全长度。
    let str = "xiyounet";
    
    console.log(str.padStart(12,)); //  ____xiyounet

    用途 提示字符串格式
    var result1 = '2018-09-09'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
    console.log(result1)

8.trimStart() , trimEnd()

 trimStart 用于去掉头部的空格,trimEnd()用于去掉尾部空格
    都不会修改原始的字符串
    let str = '   xiyounet    ';
    console.log(str.trimStart()); 'xiyounet    ';

    console.log(str.trimEnd());  '   xiyounet'

    //封装一个方法:
    function removeEmpty(str){
        var str1 = str.trimStart();
        var str2 = str1.trimEnd()
        return str2;
    }
    //removeEmpty('  223 232   ')  //"223 232"
  

2.数组的拓展

1.数组的arrry.from()方法,可以将伪数组转换为正式的数组

    var obj = {
        "0" : "1",
        "1" : "2",
        "2" : "3",
        "length" : "3"
    }
    console.log(obj); // {0: "1", 1: "2", 2: "3", length: "3"}
    
    // let arrayLike = Array.from(obj);
    // console.log(arrayLike);  //["1", "2", "3"]

    //2.第二个参数可以返回一个经过处理的数组
    let arrayLike = Array.from(obj, (item)=>{
        return item * 2;
    })
    console.log(arrayLike);  //[2, 4, 6]

2.数组的find()方法 查找数组中第一个满足条件的值,查找不到返回undefined
传入item 和 index 然后函数体中为要筛选的条件

  var personArray =[{
        id:1,
        name:'kjh',
    },{
        id:2,
        name:'czq',
    }]

    let myFind = personArray.find((item,index)=>{
        // return item.id == 2;
        return item.id == 3;  //undefined
    })

    console.log(myFind);  //{id: 2, name: "czq"}

3.findIndex() 返回数组中第一个满足条件的值在数组中给的索引

   var testArray = [10,3,32,45];
    let myFind = testArray.findIndex((item,index)=>{
        return item > 40;
    })
    console.log(myFind);  // 3 在数组中索引为3

4.includes() 方法 查找数组中是否包含某个值,返回布尔值

   var testArray = [1,2,3,4,18];
    console.log(testArray.includes(3));   //true
    console.log(testArray.includes(10));  //false

3.数值的拓展

1.math.trunc() 用于去除一个数的小数部分,返回整数部分

  Math.trunc(4.1) // 4
  Math.trunc(4.9) // 4
  Math.trunc(-4.1) // -4
  Math.trunc(-4.9) // -4
  Math.trunc(-0.1234) // -0      

2. Math.sign方法用来判断一个数到底是正数、负数、还是零。对于非数值,会先将其转换为数值。

 它会返回五种值。
    参数为正数,返回+1; Math.sign(5) // +1
    参数为负数,返回-1; Math.sign(-5) // -1
    参数为 0,返回0;    Math.sign(0) // +0
    参数为-0,返回-0;   Math.sign(-0) // -0
    其他值,返回NaN。   Math.sign(NaN) // NaN
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值