ES6字符串的扩展

zqhxuyuan 发布于2019-08-23 11:50 / 1683人阅读

摘要：注本文只是我在看了阮一峰老师的入门中的字符串的扩展后记录下来的一些认为自己需要掌握的知识点。返回布尔值，表示参数字符串是否在原字符串的头部。，引入了字符串补全长度的功能。

注：本文只是我在看了阮一峰老师的ECMAScript 6 入门中的字符串的扩展后记录下来的一些认为自己需要掌握的知识点。对大家没有什么参考价值。原文链接：ECMAScript 6 入门 —— 阮一峰

字符串的遍历器接口

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

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

includes(), startsWith(), endsWith()

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

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

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

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

let s = "Hello world!";

s.startsWith("Hello") // true
s.endsWith("!") // true
s.includes("o") // true

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

let s = "Hello world!";

s.startsWith("world", 6) // true
s.endsWith("Hello", 5) // true
s.includes("Hello", 6) // false

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

repeat()

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

"x".repeat(3) // "xxx"
"hello".repeat(2) // "hellohello"
"na".repeat(0) // ""

参数如果是小数，会被取整。

"na".repeat(2.9) // "nana"
如果repeat的参数是负数或者Infinity，会报错。

"na".repeat(Infinity)
// RangeError
"na".repeat(-1)
// RangeError

但是，如果参数是 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()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

"x".padStart(5, "ab") // "ababx"
"x".padStart(4, "ab") // "abax"

"x".padEnd(5, "ab") // "xabab"
"x".padEnd(4, "ab") // "xaba"

上面代码中，padStart和padEnd一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

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

"xxx".padStart(2, "ab") // "xxx"
"xxx".padEnd(2, "ab") // "xxx"

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

"abc".padStart(10, "0123456789")
// "0123456abc"

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

"x".padStart(4) // "   x"
"x".padEnd(4) // "x   "

padStart的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

"1".padStart(10, "0") // "0000000001"
"12".padStart(10, "0") // "0000000012"
"123456".padStart(10, "0") // "0000123456"

另一个用途是提示字符串格式。

"12".padStart(10, "YYYY-MM-DD") // "YYYY-MM-12"
"09-12".padStart(10, "YYYY-MM-DD") // "YYYY-09-12"

模板字符串

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

// 普通字符串
`In JavaScript "
" is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

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

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

let greeting = ``Yo` World!`;

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

$("#list").html(`

  first
  second

`);

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

$("#list").html(`

  first
  second

`.trim());

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/97540.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