ES6--字符串的扩展

Gu_Yan 发布于2019-08-21 16:25 / 944人阅读

摘要：现在整理下中字符串类型的一些实用扩展，供大家参考。返回布尔值，表示参数字符串是否在原字符串的头部。如果原字符串的长度，等于或者大于制定最小长度，则返回原字符串。方法，当作模板字符串的处理函数，返回已替换变量或执行函数后的字符串。

最近开发小程序，对应ES6是一个很好的应用机会。现在整理下ES6中字符串类型的一些实用扩展，供大家参考。目前主要是参考阮一峰老师的ECMAScript 6 入门

字符串的遍历接口

ES6为字符串添加了遍历接口，使得字符串可以被for..of遍历。

for(let st of "foo") {
  console.log(st)
}
// "f"
// "o"
// "o"

includes()、startsWith()、endsWith()

ES5中，indexOf()可以一个字符串是否存在另一个字符串中。ES6中又提供了三个方法：

includes(): 返回布尔值，表示是否找个参数字符串。

startsWith(): 返回布尔值，表示参数字符串是否在原字符串的头部。

endsWith(): 返回布尔值，表示参数字符串是否在原字符串的尾部。

let string = "Hello Clearlove"

string.includes("Clearlove"); // true
string.stattsWith("Hello"); // true
string.endsWith("Clearlove"); // true

这三个方法都支持第二个参数，表示开始搜索的位置：

let string = "Hello Clearlove"

string.includes("Clearlove", 6); //true
string.starstWith("Hello", 6); false
string.endsWith("Hello", 5); // true

使用第二个参数n时，endsWith()的行为与其他两个方法有所不同。它是针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

repeat

repeat方法返回一个新字符串，表示将原字符串重复n遍。

"x".repeat(2); // "xx"
"Hello".repeat(2); "HelloHello"
"na".repeat(0); ""

如果是小数则会向下取整：

"na".repeat(2.9); // "nana"

如果repeat的参数是负数或者Infinity,则会报错：

"na".repeat(-1); // RangError
"na".repeat(Infinity); // RangError

但是，如果参数是0到-1之间的小数，则等同于0，这是因为会先进行取整运算。0到-1之间的小数，取整以后等于-0，repeat视同为0

"na".repeat(-0.9); // ""

参数NaN等同于0

"na".repeat(NaN); // ""

如果repeat的参数是字符串，则会先转换成数字。

"na".repeat("na") // ""
"na".repeat("3") // "nanana"

padStart()、padEnd()

字符串自动补充，如果字符串长度不够指定长度，会在头部或者尾部补全。padStart()用于在头部补全，padEnd()用于在尾部补全。

`love`.padStart(9, "Clear"); // "Clearlove"
"Clear".padEnd(9, "love"); // "Clearlove"

如果原字符串的长度，等于或者大于制定最小长度，则返回原字符串。

"Clearlove".padStart(5, "12"); // "Clearlove"

如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。

"Clearlove".padEnd(12, "123456"); // "Clearlove123"

如果省略第二个参数，默认使用空格补全长度。

"Clearlove".padEnd(10); // "Clearlvoe "

模板字符串

模板字符串（template string）是增强版的字符串，用反引号`标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`Clearlove is a boy`

// 多行字符串
`Clearlove is
a boy`

// 字符串嵌入变量
let name = "Clearlove", time = "today"
`Hello ${name}, how are you ${time}?` // Hello Clearlove, how are you today?

上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

``Hello` Clearlove!` // `Hello` Clearlove

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$("#list").html(`

  first
  second

`);

上面代码中，所有模板字符串的空格和换行，都是被保留的，比如

trim

$("#list").html(`

  first
  second

`.trim());

模板字符串中嵌入变量，需要将变量名写在${}之中。大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性，还能调用函数。

String.raw()

String.raw()方法，当作模板字符串的处理函数，返回已替换变量或执行函数后的字符串。若模板字符串中存在一个斜杠，则会被转义成两个斜杠。若本身为两个斜杠，则不做处理。

let s1 = "Clear", s2 = "love"
String.raw`${ s1 + s2 }` // "Clearlove"

作为函数调用较少出现，就不多做介绍。

超融合服务器私有云 es6字符串扩展对象的扩展云计算的扩展服务器的扩展

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

转载请注明本文地址：https://www.ucloud.cn/yun/88526.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/remote/1460000019259004?w=1282&h=1920); 1. 属性的简洁表示法在ES6中允许直接写入变量...

yearsj 2019-08-05 17:04 评论0 收藏0
ES6入门之正则的扩展

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

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