ES6中的字符串
字符串在编程语言中,一直是使用率很高的数据,虽说函数在js语言中是一等公民,但是字符串,怎么也能算得上是千年老二,下面我就一起和大家探讨一下在es6中的一些新用法和特性,特别是在字符串拼接的时候,会解放作为程序员的眼睛和双手。大家也可以关注我的微信公众号,蜗牛全栈。
一、模板字符串:用`替换传统的单引号或双引号
1、传统字符串拼接
const str = "asasasas\n"
+"sasasasasa\n"
+"rrgtrgtegergre"
console.log(str) // 这个时候输出的是换行的字符串
2、es6中字符串拼接
const str = `asasasas
sasasasasa
rrgtrgtegergre
`
console.log(str) // 输出的和上一段完全相同效果的字符串
3、传统字符串中的运算并拼接
const a = 20
const b = 14
const c = "es"
const str = "我的年龄是:"+(a+b)+",我在讲"+c
console.log(str) // 我的年龄是34,我在将es
4、es6字符串中的运算并拼接:在使用`的基础上,通过$和{}包裹变量。PS:这个语法在小编重构项目的时候,不知道省了多少眼药水,真是大大的福利呀。
const a = 20
const b = 14
const c = "es"
const str5 = `我的年龄是${a+b},我在讲${c}`
console.log() // 我的年龄是34,我在将es
二、嵌套模板:主要针对标签中的动态class。小编之前在Vue项目中看到大量类似的实例,当时还不明白,现在才知道是个啥。
1、传统方式
const isLarge = () => {
return true
} let class1 = 'icon'
class1 += isLarge()?' icon-big':" icon-small"
console.log(class1) // 'icon icon-big'
2、es6新方式
const isLarge = () => {
return true
}
const class1 = `icon icon-${isLarge()?' icon-big':" icon-small"}`
console.log(class1) // 'icon icon-big'
三、带标签的模板字符串
const foo = (a,b,c,d) =>{
console.log(a)
console.log(b)
console.log(c)
console.log(d)
} foo(1,2,3,4) // 1 2 3 4 const name = "lilei"
const age = 34
foo`这是${name},他的年龄是${age}岁` // ["这是",",他的年龄是","岁"] lilei 34 undefind
四、includes:判断指定字符串是否在其他字符串内,存在返回true,不存在返回false
// indexOf 判断字符串中是否含有某个字符串,如果存在,返回该字符串对应的下标,不存在返回-1
const str = "1234"
console.log(str.indexOf("2")) // 1
const str = "1234"
console.log(str.includes("2")) // true
五、startWith:判断自定义字符串是否以指定字符串开始,返回布尔值
const str = "1234"
console.log(str.startsWith("12")) // true
六、endWith:判断自定字符串是否以指定字符串结束,返回布尔值
const str = "1234"
console.log(str.endtWith("12")) // false
七、repeat:重复指定字符串指定次数,返回新字符串
const str = "1234"
const newStr = str.repeat(3)
console.log(newStr) // 123412341234
ES6中的字符串的更多相关文章
- ES6中 对字符串增强
在曾经,我们只能用A.indexof(B)来判断A中是否含有B字符串: 现在在ES6中 有了: includes(), startswith(),endswith() reapt()重复次数: 输出 ...
- ES6中对字符串处理的优点
目录 1.字符的Unicode表示法 2.字符串的遍历接口 3.直接输入 U+2028 和 U+2029(分行符 和 分段符) 4.JSON.stringify() 的改造 1.字符的Unicode表 ...
- ES6中新增字符串方法,字符串模板
多了两个新方法 startsWith endsWith 返回的是一个Boolean值 let str='git://www.baidu.com/2123123'; if(str.startsWith( ...
- ES6中的模板字符串和新XSS Payload
ES6中的模板字符串和新XSS Payload 众所周知,在XSS的实战对抗中,由于防守方经常会采用各种各样严格的过滤手段来过滤输入,所以我们使用的XSS Payload也会根据实际情况作出各种各样的 ...
- ES6中字符串扩展
ES6中字符串扩展 ① for...of 遍历字符串: 例如: for(let codePoint of 'string'){ console.log(codePoint) } 运行结果: ② in ...
- ES6中字符串的扩展
一.查找字符串 在ES5中,可以使用 indexOf 方法和 lastIndexOf 方法查找字符串: let str = 'hello world'; alert(str.indexOf('o')) ...
- es6中的模版字符串
目录 字符串拼接 includes() startsWith() endsWith() padStart() es6中的模版字符串替代了原有的字符串拼接功能. 字符串拼接 es5方式 传统的字符串拼接 ...
- ES6中字符串的新增方法梳理
1.String.fromCodePoint(); String,fromCodePoint()方法可以认为是对String.fromCharCode()方法的扩展,这两个方法的共同点在于都是用于Un ...
- ES6之模版字符串
ES6之模版字符串 最近在项目中使用了ES6的模版字符串,在这里加以总结. 1.之前我们也可以使用JavaScript输出模版字符串,通常是下面这样的: $("#result"). ...
随机推荐
- KMP板子(其实还没完全懂...)
KMP模板 1.next数组的实际含义 next数组从-1开始,主串a,子串b,next[j]=k,满足b[0,k-1]==b[j-k,j-1],k同时也为b子串前缀的下标,j为b子串后缀的下标 ge ...
- 使用JSONassert进行JSON对象对比
在日常工作中,会接到用户提出一张订单,修改后需要记录每次修改的信息,然后需要查看修改前后的差异信息这样的需求.要实现这样的功能方式有很多.下面介绍下JSONassert的简单使用,也方便自己后续使 ...
- jQuery清空元素和克隆元素
1.清空 $(function () { $('#btn').click(function () { $('#ul1').html('') $('#ul1').empty() $('#ul1').re ...
- 【转载】Pycharm调试高效,还是pdb调试高效? (在服务端)
https://segmentfault.com/q/1010000005067119 Pycharm调试高效,还是pdb调试高效? (在服务端) python 3.9k 次浏览 问题对人有帮助, ...
- 关于flume中涉及到时间戳的错误解决,Expected timestamp in the Flume even
在搭建flume集群收集日志写入hdfs时发生了下面的错误: java.lang.NullPointerException: Expected timestamp in the Flume event ...
- tail -n 13 history |awk '{print $2,$3,$4,$5,$6,$7,$8.$9,$10}'提取第2到第11列
# cat history |awk '{print $2,$3,$4,$5,$6,$7,$8.$9,$10}' # tail -n 13 history 215 systemctl stop 216 ...
- Linux性能监控与分析之--- CPU
Linux性能监控与分析之--- CPU 望月成三人关注 2016.07.25 18:16:12字数 1,576阅读 2,837 CPU性能指标 用户进程使用CPU的比率 系统进程使用CPU的比率 W ...
- 025.Python面向对象以及对对象的操作
一 面向对象基本概念 1.1 OOP面向对象的程序开发 用几大特征表达一类事物称为一个类,类更像是一张图纸,表达只是一个抽象概念 对象是类的具体实现,更像是由这图纸产出的具体物品,类只有一个,但是对象 ...
- mysql基础之数据库变量(参数)管理
数据库的数据存放路径:[root@ren7 mysql]# pwd /var/lib/mysql [root@ren7 mysql]# ls aria_log.00000001 ibdata1 mul ...
- JQuery 动态加载 HTML 元素时绑定点击事件无效问题
问题描述 假设项目中有一个列表页面,如下: 当点击列表一行数据可以显示详情页面,而详情页面的数据是根据当前行的数据作为参数,通过 ajax 请求到后台返回的数据,再根据返回的结果动态生成 html 页 ...