es6之字符串添加的东西

Posted 2021-02-03 maniteresting

在es6里边对字符串添加了一些东西!

 字符串模板(非常友善)

相信大家之前都遇到过万恶的字符串拼接,真是噩梦,不过之后有了字符串模板之后,再也不用担心字符串拼接会乱了...

之前的字符串拼接

　　　　 let name =‘Strive‘;

        let age = 18;

        let str = ‘这个人叫‘+name+‘, 年龄是 ‘+age+‘岁‘;

　　　   console.log(str);

　　　　　let str1=`这个人叫${name},年龄是${age}岁`
//现在是这样的

//简直不要太方便有没有

其实这样还好吧 不是很容易乱....

那么这样呢.....(haha)

 

     let data =[
            {title:‘记瑞士发表人类命运共同体演讲一周年‘, read:100},
            {title:‘关心！刚刚，良渚古城遗址正式申报世界遗产‘, read:9},
            {title:‘党中央国务院决定了!在全国开展扫黑除恶专项斗争‘, read:10},
            {title:‘宪法修改必须依法按程序进行‘, read:180},
            {title:‘新时代的中共全面从严治党 北京两会  新时代新气象‘, read:900}
        ]

       let oUl = document.querySelector(‘#ul1‘);
        for(let i=0;i<data.lengthl;i++){
            let oLi = document.createElement(‘li‘);
                oLi.innerhtml=‘<span>‘+data[i].title+‘</span>‘
                    +‘<span>阅读人数:‘+data[i].read+‘</span>‘
                    +‘<a href="javascript:;">详情</a>‘;
                oUl.appendChild(oLi);
                     
}


//哈哈哈是不是早已经迷了,那还等什么用一下字符串模板吧
for(let i=0;i<data.length;i++){

     let oLi = document.createElement(‘li‘);
　　　　oLi.innerHTML=`<span>${data[i].title}</span><span>阅读人数${data[i].read}</sapn><a herf=‘Javascript:;‘>详情</a>`
　　　　　oUl.appendChild(oLi)

}
//简直赞爆了

　　其实es6在字符串中还增加了一些其他的方法:

　　一  字符串查找

　　　　　　

//之前的方法  
      let str = ‘apple banana pear‘;

        if(str.indexOf(‘banana‘)!=-1){
            alert(true);
        }else{
            aler(false);
        }
//现在的

let str = ‘apple banana2 pear‘;

alert(str.includes(‘banana‘));直接返回truez   应该说各有用处吧 我曾经有个需求还必须的用之前的写

   //判断浏览器:  includes

if(navigator.userAgent.includes(‘Chrome‘)){
    alert(‘是chrome‘)
}else{
    alert(‘!是chrome‘)
}

  二  字符串检测

字符串是否以谁开头:   str.startsWith(检测东西)  检测地址  http://www.xxx.xx

let str =‘file:///D:/AppServ/www/ES6-demo/%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%9F%A5%E6%89%BE3.html‘;
let str2 =‘https://www.baidu.com/‘;

console.log(str2.startsWith(‘http‘));//返回true

字符串是否以谁结尾:   str.endsWith(检测东西)     检测图片格式  .png
let str1=‘sadasdasd.png‘   
str1.endsWith(‘.png‘)  //返回true

重复字符串:         str.repeat(次数);
str1.repeat(5)
"sadasdasd.pngsadasdasd.pngsadasdasd.pngsadasdasd.pngsadasdasd.png"

填充字符串:
   str.padStart(整个字符串长度, 填充东西)   往前填充
　　　　str1.padStart(20,‘a‘)
　　　　"aaaaaaasadasdasd.png"
　　
   str.padEnd(整个字符串长度, 填充东西)    往后填充
　　　str1.padStart(20,‘a‘)
　　　"sadasdasd.pngaaaaaaa"   
   str.padStart(str.length+padStr.length, padStr)

 　　// ‘a‘ ->  ‘xxxa‘
　　let str = ‘apple‘;
　　let padStr = ‘x‘;

总结

　　字符串查找:
   str.indexOf(要找的东西)   返回索引(位置) ，没找到返回-1
   str.includes(要找的东西)   返回值  true/false

   判断浏览器:  includes