ECMAScript 6 -- 字符串的扩展

简介: 字符串的遍历器接口:字符串可以被for...of循环遍历。DOCTYPE html> for (let codePoint of 'foo') { console.log(codePoint) }这个遍历器最大的优点是可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点。

字符串的遍历器接口:

字符串可以被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!

 

相关文章
|
8月前
|
JSON 自然语言处理 JavaScript
ES6 字符串的扩展
ES6 字符串的扩展
|
4月前
|
C++
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
HTML+JavaScript构建一个将C/C++定义的ANSI字符串转换为MASM32定义的DWUniCode字符串的工具
|
7月前
|
JavaScript 前端开发
JavaScript进阶-模板字符串与增强的对象字面量
【6月更文挑战第19天】ES6的模板字符串和增强对象字面量提高了JavaScript的易读性和效率。模板字符串(` `)支持变量嵌入和多行,简化了字符串处理;增强对象字面量允许简写属性与方法,以及动态属性名。注意模板字符串的闭合和性能影响,以及对象字面量的简写语法和计算属性名的恰当使用。通过实例展示了这两项特性的应用,助力编写更优雅的代码。
113 4
|
自然语言处理 JavaScript 前端开发
ES6(字符串的扩展)
ES6(字符串的扩展)
101 0
08_JavaScript(变量的语法扩展)
08_JavaScript(变量的语法扩展)
|
8月前
|
JavaScript 安全 测试技术
TypeScript基础(二)扩展类型-枚举及其位运算
TypeScript中的枚举(Enum)是一种数据类型,用于定义一组具有命名值的常量。枚举可以帮助我们在代码中使用更具有可读性和可维护性的常量。 本文将介绍字面量类型的问题、类型别名的局限以及枚举的优缺点及示例详细说明枚举的用处,以及扩展知识枚举的位运算。
141 0
|
JavaScript 前端开发
现代JavaScript:深入了解ES6语法特性
ECMAScript 6(通常简称为ES6或ES2015)是JavaScript的重要更新,引入了许多强大的语法特性和新的功能。在本博客中,我们将深入研究ES6的语法特性,包括箭头函数、解构赋值、类和模块等,以帮助您更好地利用现代JavaScript的强大功能。
329 0
|
JavaScript 网络架构
|
前端开发 JavaScript
前端祖传三件套JavaScript的ES6+之各种扩展:字符串、数值、函数、数组、对象、正则.
在前端开发中,ES6+ 为 JavaScript 带来了各种扩展功能,包括字符串、数值、函数、数组、对象、正则等方面的增强。本文将介绍 JavaScript 中各种扩展的基本概念和使用方法。
142 0

热门文章

最新文章