ES6 中的字符串新增方法及其应用-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 JavaScript 的深入发展，ES6(或称 ECMAScript 2015) 带来了许多新的特性，其中字符串的新增方法尤为重要。字符串作为前端开发中常见的数据类型之一，被广泛应用于业务逻辑和视图展示等方面。本文将介绍 ES6 中新增的字符串方法以及其实际应用场景，帮助读者了解其相关概念，提升开发效率。

字符串新的方法介绍

模板字符串

ES6 新增了一种内嵌表达式的字符串类型，称为模板字符串（Template String）。其特殊之处在于，字符串可以包含占位符，以及变量表达式，可以使用 ${variable} 的格式插入变量，这样可以提高代码的可读性和维护性。

const name = 'Tom'
const age = 18
const info = `Name: ${name} \nAge: ${age}`
console.log(info)

输出结果：

Name: Tom 
Age: 18

startsWith() 和 endsWith()

String 对象新增了 startsWith() 和 endsWith() 方法，用于判断字符串是否以指定的字符开头或结尾，返回值为布尔类型。

const str = 'Hello JavaScript'
console.log(str.startsWith('Hello'))     // true
console.log(str.startsWith('World'))     // false
console.log(str.endsWith('Script'))      // true
console.log(str.endsWith('HTML'))        // false

repeat()

repeat() 方法可以将字符串重复指定次数，返回重复后的新字符串。

console.log('abc'.repeat(3))  // abcabcabc

padStart() 和 padEnd()

padStart() 和 padEnd() 方法可以填充字符串，使其达到指定长度。其中，padStart() 用于在字符串前填充，padEnd() 用于在字符串后填充，如果指定长度小于原始字符串长度，则返回原始字符串。

console.log('abc'.padStart(6, '0'))   // 000abc
console.log('abc'.padEnd(6, '0'))     // abc000
console.log('abc'.padStart(2, '0'))   // abc

实际应用场景

标签模板

模板字符串的特性可以被用于标签模板（Tagged Template）中，标签模板是指函数名后加上 `` 操作符的一种用法。其作用是在模板字符串中插入表达式，使其与普通字符串分离，从而在函数中自定义处理逻辑。下面是一个示例的标签函数：

function myTag(arr, a, b){
    console.log(arr)        // [ 'Hello ', ' world! ', '' ]
    console.log(a)          // 1
    console.log(b)          // 2
}
const a = 1
const b = 2
myTag`Hello ${a + b} world! `

其中，myTag 函数的第一个参数 arr 是一个字符串数组，数组元素是模板字符串的每个非表达式的部分，第二个和第三个参数分别是模板字符串中每个表达式的值，可以用于自定义处理逻辑。

字符串补全

padStart() 和 padEnd() 方法可以用于字符串补全，例如，可以用 padStart() 方法实现时间格式的补全：

function formatDate(date){
    const year = date.getFullYear()
    const month = (date.getMonth()+1).toString().padStart(2, '0')
    const day = date.getDate().toString().padStart(2, '0')
    return `${year}-${month}-${day}`
}
const date = new Date()
console.log(formatDate(date))

该函数将当前日期格式化成 yyyy-mm-dd 的格式。其中，padStart() 方法用于将月份和日期补全到两位数，第一个参数是期望长度，第二个参数是用于填充的字符。

总结

ES6 中新增的字符串方法使得字符串的处理变得更加简单和方便，同时也提供了更多新的应用场景。本文简要介绍了字符串的新增方法及其实际应用场景，还有许多其他的方法值得探索。读者可以在平时的开发工作中多加尝试，提高自己的前端开发效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6468306d968c7c53b085ef10