es6 字符串的扩展

Euphoria 发布于2019-08-23 14:40 / 2121人阅读

摘要：字符串添加了很多新功能，当然也有很多关于字符串编码的一些学习性东西，在这里咱们就不多做介绍，介绍一下常用的一些方法字符串的遍历接口中字符串扩展了遍历器接口其实看起来和其他的遍历长的挺像的，那我们来看看它是否除了能遍历字符串之外，还能否遍历其

es6字符串添加了很多新功能，当然也有很多关于字符串编码的一些学习性东西，在这里咱们就不多做介绍，
介绍一下常用的一些方法

字符串的遍历接口

es6中字符串扩展了遍历器接口

for(let i of "abcdef"){
    console.log(i) // a,b,c,d,e,f
}

其实看起来和其他的遍历长的挺像的，那我们来看看它是否除了能遍历字符串之外，还能否遍历其它类型呢

那我们来试一下数组类型,会像我们预想的那样会得到遍历的值

for(let i of [1,2,3]){
    console.log(i) // 1,2,3
}

看一下对象的类型的遍历
for(let i of {a:1,b:2}){
    console.log(i) // 报错
}

上面遍历对象是会报错的，因为for of 是不能直接枚举普通对象的，除非这个对象有Iterator接口才能使用，Iterator接口在这里就不多说了，以后的文章会对它进行讲解的

for of 循环遍历器还可以配合break(直接跳出) continue（跳出继续执行） return （在函数内使用）配合使用跳出循环
for (let a of "123456") {
    if (a ==="1") {
        break
    }
    console.log(a) // 1
}

有时间的话大家不妨可以试一下

字符串includes（），startsWith（），endsWith（）方法

es5中提供了indexOf方法来确定查找的字符串是否在其中，现在又多了三个，是不是很开心！！！

includes方法返回布尔值，是否在字符串其中

   let str = "this is es6"
   str.includes("es6")// true
   这个方法还支持第二个参数，那就是选择位置搜索，从0开始算，空格也会算位置,是从当前位置往后搜索，也算当前的位置
   let str = "this is es6"
   str.includes("i"， 5) // true
   搜索多个也是可以的，当然如果位置超过es6的真实位置会查找不到
   str.includes("es6", 5) // true

startsWith方法返回布尔值，是否在字符串的头部

   let str = "is heard"
   str.startsWith("is") // true
   
   str.startsWith("i") // true
   
   str.startsWith("is heard") // true
   
   str.startsWith("h") // false
   
   上边的第三个为什么也算头部，在我看来因为把is heaed 看做了整体所以都算头部，而最后一个false是因为在is heard查找h所以h不算是头部
   
   这个方法也是有第二个参数的
   str.startsWith("i"， 0) // true
   str.startsWith("is"， 0) // true
   str.startsWith("is"， 1) // false

endsWith方法返回布尔值，是否在字符串的尾部

   let str = "is last"
   str.endsWith("t") //true
   str.endsWith("st") //true，
   str.endsWith("s") //false

其实这个和上边的方法startsWith差不多少只不过这个是查找的尾部，那个是查找的头部

repeat 重复返回一个新的字符串，重复多少次取决于你的参数

参数是 0 到-1 之间的小数，则等同于 0，-0也算0
abc.repeat(3)// abcabcabc

因为不能小于-1，才会报错
"abc154789".repeat(-1) //报错

大于-1的话会被取整为0，所以会是空的字符串
"abc154789".repeat(-0.9999999999) //“”

NaN也会被当做为0处理
"NaN".repeat(NaN) // ""

参数也可以为字符串,但是也是空因为下面的字符串会被转为NaN
"hhh".repeat("cc") // ""

padStart()，padEnd()Es7的字符串自动补全功能

padStart 我们来先说一下头部补全

"aa".padStart(5, "xc") // xcxaa
"啊！".padStart(4, "你好") // "你好啊！"
"好看".padStart(4, "你长得真") // "你长好看"
"好看".padStart(4) // "   看"
上面的例子是第一个参数是5，表示要5个字符，第二个参数是补全的参数，从头部补全xcx,’aa‘是不会变的，当然倒数第二个第一个参数也算限制了文字，所以会从左到右选取剩余的长度，最后一个的话没有第二个参数会按四个空格

我们来看看从后面补全，其实机制和从头部补全差不多，看一下例子
"aa".padEnd(5, "xc") // aaxcx
"啊！".padEnd(4, "你好") // "啊！你好"

模板字符串

我们先来看一下什么是字符串模板,注意不要用单双引号，要用··，对就是那个

普通的字符串模板
·this is 啊啊啊啊·

多行文本的字符串模板
·哈哈哈，你好啊
我是哈哈·

变量的模板字符串
let a = "你好"
${a}啊 // 你好啊

let str = "this is"
${str}模板 // this is 模板

还可以使用函数，但是得把你需要的return出来
function add () {

   return 123

}
${add()}456 // 123456

模板编译
let a = `

 <% for(let i=0; i < 3; i++) { %>
   <%= i %>
 <% } %>

上面会被输出为

   0
   1
   2

我们再来看看下面这个,你们猜函数会执行吗
let html = `

`
function add() {

   alert(123)

}

String.raw字符串的模板

 let s1 = "qwe", s2 = "123"
 String.raw`${ s1 + s2 }` // qwe123
 
 下面这种是左边的参数会被分为["h","e","l","l","o"],然后就是左边一个参数逗号右边一个开始补
 String.raw（{raw: "hello"}, 123）// h123ello
 
 第二个参数为对象的话是不会被分解的哦
 String.raw({ raw: "hello" }, {aa: "ooo"});"h[object Object]ello"

GPU云服务器云服务器 es6字符串扩展对象的扩展云计算的扩展服务器的扩展

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100974.html

es6学习笔记--字符串的扩展、数组的扩展、对象的扩展

摘要：字符串的扩展字符串的遍历器接口字符串可以被循环遍历。即能识别编号大于查询字符串是否包含某个字符返回布尔值，表示是否找到了参数字符串。返回布尔值，表示参数字符串是否在原字符串的头部。字符串的扩展 1.字符串的遍历器接口字符串可以被for...of循环遍历。与es5的比较for循环虽可以遍历字符串，但不能识别大于oxFFFF的编码； 2.位置 --> 字符/码点根据指定位置返回对应...

不知名网友 2019-08-22 16:02 评论0 收藏0
ES6入门之对象的扩展

摘要：循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组，包含对象自身的所有属性的键名。目前，只有对象方法的简写法可以让引擎确认，定义的是对象的方法。showImg(https://user-gold-cdn.xitu.io/2019/5/21/16ada8456223b0e1); 1. 属性的简洁表示法在ES6中允许直接写入变量和函数，作为对象的属性和方法，使得代码的书写更为简洁。...

RiverLi 2019-05-23 11:58 评论0 收藏0
《ES6标准入门》读书笔记

摘要：标准入门读书笔记和命令新增命令，用于声明变量，是块级作用域。用于头部补全，用于尾部补全。函数调用的时候会在内存形成一个调用记录，又称为调用帧，保存调用位置和内部变量等信息。等到执行结束再返回给，的调用帧才消失。《ES6标准入门》读书笔记 @(StuRep) showImg(https://segmentfault.com/img/remote/1460000006766369?w=3...

HollisChuang 2019-08-19 18:41 评论0 收藏0
ES6入门之对象的扩展

摘要：属性的简洁表示法在中允许直接写入变量和函数，作为对象的属性和方法，使得代码的书写更为简洁。循环遍历对象自身的和继承的可枚举属性不含属性。返回一个数组，包含对象自身的所有属性的键名。 showImg(https://segmentfault.com/img/remote/1460000019259004?w=1282&h=1920); 1. 属性的简洁表示法在ES6中允许直接写入变量...

AWang 2019-08-26 13:53 评论0 收藏0
ES6入门之正则的扩展

摘要：正则的扩展参数为字符串，那么第二个参数表示正则表达式的修饰符，如下等价于参数为一个正则表达式，这时返回一个原有正则表达式的拷贝。如下调用调用调用调用修饰符对正则表达式添加了修饰符，用来正确处理大于的字符。 showImg(https://segmentfault.com/img/bVbrJqm?w=800&h=1200); 1. 正则的扩展参数为字符串，那么第二个参数表示正则表达式...

jifei 2019-08-23 17:05 评论0 收藏0