es6学习语法总结-字符串

2021-11-01 16:32:59 阅读：152 来源： 互联网

字符串遍历

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

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

这个遍历器最大的优点是可以识别大于0xFFFF的码点，传统的for循环无法识别这样的码点。

for (let i of text) {
  console.log(i);
}

ES6提供了三种新方法。

includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

var s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
//第二个参数表示从第几个位置开始搜索
//endsWith的行为与其他两个方法有所不同。
//它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。
s.startsWith('world', 6) // true 
s.endsWith('Hello', 5) // true 
s.includes('Hello', 6) // false

repeat()方法

repeat方法返回一个新字符串，表示将原字符串重复n次，小数点会取整不是四舍五入，0~-1之间的小数取整后为0，NaN或字符串参数均会转换为0

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat(2.9) // "nana"
'na'.repeat(-1) //报错

字符串补全长度功能

padStart()用于头部补全，padEnd()用于尾部补全，共接受两个参数。

第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。

两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。如果省略第二个参数，默认使用空格补全长度。

从前开始补全
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
从后开始补全
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
提示字符串格式。
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

模板字符串

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

// 普通字符串
`In JavaScript '\\n' is a line-feed.` 
//  In JavaScript
        is a line-feed.

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

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

如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

var greeting =\Yo\\ World!;

使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。可以使用trim方法消除换行。

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

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

//变量名写在${}之中，大括号内部可以放入任意的JavaScript表达式，可以进行运算

var x = 1;
var y = 2;
`${x} + ${y} = ${x + y}`

模板字符串之中调用函数。如果模板字符串中的变量没有声明，将报错

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`

标签模板

模板字符串可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。

alert`123`
// 等同于
alert(123)

如果模板字符里面有变量，会将模板字符串先处理成多个参数，再调用函数。

var a = 5;
var b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);

String.raw()

用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。如果原字符串的斜杠已经转义，那么String.raw不会做任何处理。

String.raw`Hi\\n${2+3}!`;
// "Hi\\\\n5!"

String.raw`Hi\\u000A!`;
// 'Hi\\\\u000A!'

标签：es6,repeat,补全,语法,var,字符串,Hello,模板
来源： https://www.cnblogs.com/dy1997/p/15494307.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

es6学习语法总结-字符串