字符串的遍历器接口:
字符串可以被for...of
循环遍历。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> for (let codePoint of ‘foo‘) { console.log(codePoint) } </script> </body> </html>
这个遍历器最大的优点是可以识别大于0xFFFF
的码点,传统的for
循环无法识别这样的码点。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> var text = String.fromCodePoint(0x20BB7); for (let i of text) { console.log(i); } </script> </body> </html>
at()
ES5对字符串对象提供charAt
方法,返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF
的字符。
normalize()
normalize
方法可以接受一个参数来指定normalize
的方式,参数的四个可选值如下。
NFC
,默认参数,表示“标准等价合成”(Normalization Form Canonical Composition),返回多个简单字符的合成字符。所谓“标准等价”指的是视觉和语义上的等价。NFD
,表示“标准等价分解”(Normalization Form Canonical Decomposition),即在标准等价的前提下,返回合成字符分解的多个简单字符。NFKC
,表示“兼容等价合成”(Normalization Form Compatibility Composition),返回合成字符。所谓“兼容等价”指的是语义上存在等价,但视觉上不等价,比如“囍”和“喜喜”。(这只是用来举例,normalize
方法不能识别中文。)NFKD
,表示“兼容等价分解”(Normalization Form Compatibility Decomposition),即在兼容等价的前提下,返回合成字符分解的多个简单字符。
includes(), startsWith(), endsWith()
- includes():返回布尔值,表示是否找到了参数字符串。
- startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> var s = ‘Hello world!‘; s.startsWith(‘Hello‘) // true s.endsWith(‘!‘) // true s.includes(‘o‘) // true console.log(s.startsWith(‘Hello‘)); console.log(s.endsWith(‘!‘)); console.log( s.includes(‘o‘)); </script> </body> </html>
结果:
true
true
true
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> var s = ‘Hello world!‘; console.log(s.startsWith(‘world‘, 6) ); console.log(s.endsWith(‘Hello‘, 5)); console.log( s.includes(‘Hello‘, 6)); </script> </body> </html>
endsWith
的行为与其他两个方法有所不同。它针对前n
个字符,而其他两个方法针对从第n
个位置直到字符串结束。
结果:
true
true
false
repeat()
repeat
方法返回一个新字符串,表示将原字符串重复n
次。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> console.log( ‘hello‘.repeat(2)); </script> </body> </html>
结果:
hellohello
padStart(),padEnd()
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()
用于头部补全,padEnd()
用于尾部补全。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> console.log(‘x‘.padStart(5, ‘ab‘)); console.log(‘x‘.padStart(4, ‘ab‘) ); console.log(‘x‘.padEnd(5, ‘ab‘)); console.log(‘x‘.padEnd(4, ‘ab‘) ); </script> </body> </html>
结果:
ababx
abax
xabab
xaba
模板字符串
模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> // 字符串中嵌入变量 var name = "Bob", time = "today"; console.log(`Hello ${name}, how are you ${time}?`); </script> </body> </html>
结果:
Hello Bob, how are you today?
引用模板字符串本身,在需要时执行,可以像下面这样写:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> // 写法一 let str = ‘return ‘ + ‘`Hello ${name}!`‘; let func = new Function(‘name‘, str); func(‘Jack‘) // "Hello Jack!" console.log(func(‘Jack‘)); // 写法二 let str1 = ‘(name) => `Hello ${name}!`‘; let func1 = eval.call(null, str1); console.log(func1(‘Jack‘)); </script> </body> </html>
结果:
Hello Jack!
Hello Jack!
时间: 2024-10-08 04:00:33