在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之字符串添加的东西的更多相关文章

  1. [js]es6语法: 字符串和数组的方法

    s的方法 根据index取value: 取首尾项,arr[0], arr[arr.length-1] 根据value取index(判断是否包含子字符串): s.indexOf 栗子: 'maotai' ...

  2. ES6让字符串String增加了哪些好玩的特性呢?

    确实因为现在天气变热了,所以一天天的这么写我也很累.所以如果阅读的时候有什么错误还请大家指出来,不好意思.学习永无止境. OK,今天继续讲解ES6系列知识 学过上一节的解构赋值就知道,ES6确实给我们 ...

  3. javascript的replace+正则 实现ES6的字符串模版

    采用拼接字符串的形式,将 JSON 数据嵌入 HTML 中.开始时代码量较少,暂时还可以接受.但当页面结构复杂起来后,其弱点开始变得无法忍受起来: 书写不连贯.每写一个变量就要断一下,插入一个 + 和 ...

  4. sql 解析字符串添加到临时表中 sql存储过程in 参数输入

    sql 解析字符串添加到临时表中  sql存储过程in 参数输入 解决方法 把字符串解析 添加到 临时表中 SELECT * into #临时表   FROM dbo.Func_SplitOneCol ...

  5. ES6中字符串扩展

    ES6中字符串扩展 ① for...of 遍历字符串: 例如: for(let codePoint of 'string'){ console.log(codePoint) } 运行结果: ②  in ...

  6. ES6教程-字符串,函数的参数,了解函数的arguments对象,js面向对象,设计模式-单例模式,解构赋值

    前言 主要讲解了ES6对字符串的拓展,包括includes,startsWith和endsWith,另外增加了字符串模板. Start includes()是否包含 startsWith()以什么开头 ...

  7. Java 给Word指定字符串添加批注

    本文将介绍在Java程序中如何给Word文档中的指定字符串添加批注.前文中,主要介绍的是针对某个段落来添加批注,以及回复.编辑.删除批注的方法,如果需要针对特定关键词或指定字符串来设置批注,可以参考本 ...

  8. ES6面向对象 动态添加标签页

    HTML <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

  9. es6模板字符串使用使${} 来包裹一个变量或者一个表达式

    es6模板字符串使用使${} 来包裹一个变量或者一个表达式 2019-04-28 14:33:54 Gabriel_wei 阅读数 1774  收藏 更多 分类专栏: 前端   版权声明:本文为博主原 ...

随机推荐

  1. mysql怎样配置ODBC数据源

      一个基于ODBC的应用程序对数据库的操作不依赖任何DBMS,不直接与DBMS打交道,所有的数据库操作由对应的DBMS的ODBC驱动程序完成.所以说mysql配置ODBC数据源也很重要. 工具/原料 ...

  2. MIUI目前为止最简单安装谷歌服务框架教程

    安装谷歌服务框架方法有很多,比如用第三方 rec卡刷gapps包.用第三方工具安装......然而这些对于新手来说还是比较难的! 我今天说的方法可以说是最简单的:1.不需要修改文件:2.不需要借助第三 ...

  3. 解决VS2019中.net core WPF 暂时无法使用 Designer 的临时方法

    目录 解决 VS2019 中.net core WPF 暂时无法使用 Designer 的临时方法 安装 vs 2019 professional/enterprise版本 在vs的设置里,勾选.NE ...

  4. 从EventLoop到宏任务与微任务

    1.javascript是单线程的 javascript是单线程的,意思是javascript在同一时间内只能做一件事情. 为什么是单线程的? 因为js的主要用途是用于用户交互和操作DOM,如果是多线 ...

  5. 【Python3爬虫】常见反爬虫措施及解决办法(二)

    这一篇博客,还是接着说那些常见的反爬虫措施以及我们的解决办法.同样的,如果对你有帮助的话,麻烦点一下推荐啦. 一.防盗链 这次我遇到的防盗链,除了前面说的Referer防盗链,还有Cookie防盗链和 ...

  6. 原生js查询、添加、删除类

    1.添加类 为标签添加一个class的类 如:<div id="box" class="box">内容</div> document.g ...

  7. 如何使用JS来开发室内地图商场停车场车位管理系统

    在线体验到室内地图的功能后,手机对室内地图加载一个字,要显示“快”,目前微信和电脑都可以打开室内地图的要求是3秒内打开,能有定位导航的功能最好,这样方便找到要去的地方. 对于经常逛商场的MM来说,哪里 ...

  8. HTML 练习实现遮罩层

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 关于Python中读取写入文件并进行文件与用户交互的操作

    一.提前知识点 在python中是同样和其他语言一样可以进行文件的读取写入操作,值得注意的是,Python中打开文件读取的方式有几种,分别是以下几种: f = open('username.txt') ...

  10. WPF 通过透明度遮罩和变换制作倒影效果

      倒影效果 代码 <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http:/ ...