es6之字符串添加的东西

Posted maniteresting

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了es6之字符串添加的东西相关的知识,希望对你有一定的参考价值。

在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

 














































以上是关于es6之字符串添加的东西的主要内容,如果未能解决你的问题,请参考以下文章

es6之各种数据类型的扩展

ES6基础之——判断字符串里是否包含其他字符串

javascript es6新增语法之`${}`

ES6系列_10之Symbol在对象中的作用

ES6解构赋值

粗看ES6之字符串