【04】ES6：字符串的扩展

一、模板字符串

模板字符串是可以插入表达式的字符串字面量。模板字符串和传统字符串比较，存在以下特点：

1、使用反单引号

传统字符串字面量使用单引号 ‘’ 或者双引号 “”，模板字符串使用反单引号（backquote） “

const str1 = 'hello world'
const str2 = `hello world`
console.log(str1, str2, str1 === str2) 
// hello world, hello world, true

2、插入表达式

模板字符串可以插入表达式，通过 ${expression} 形式插入表达式

expression 可以是任意常量、变量、函数调用。在 ${expression} 前后，也可以有任意的其他合法的字符，例如 `abc${expression}dfg` 。最终，${expression} 会转化为字符串和前后的字符串拼接，如果有的话。

const person = {
	name: '小明',
	age: 14,
	sex: '男'
}

// 传统字符串写法
const info = 
	'姓名是：' + person.name +
	', 年龄是：' + person.age +
	', 性别：' + person.sex

// 模板字符串写法
// const info = `姓名是：${person.name}, 年龄是：${person.age}, 性别：${person.sex}` 

console.log(info) 
// 姓名是：小明, 年龄是：14, 性别：男

3、模板字符串可以有多行文本

模板字符串中，所有的空格、换行或缩进都会被保存在输出中

// 一般字符串
const info = '第一行n第二行'

// 模板字符串
const info = `第一行
第二行`	// 注意不能有缩进

console.log(info)
/*
第一行
第二行
*/

二、字符串的新增方法

字符串的所有方法都不会改变原字符串

1、includes()、startsWith()、endsWith()

传统上，JavaScript 只有 indexOf 和 lastIndexOf 方法，可以用来确定一个字符串是否包含在另一个字符串中。

• str.indexOf(str, [start]) ：字符串索引，返回检索字符在字符串中首次出现位置，没有找的返回-1。从字符串开头开始，start表示开始搜索的位置，默认为0第一项。
• str.lastIndexOf(str, [start])：字符串索引，返回检索字符在字符串中首次出现位置，没有找的返回-1。从字符串结尾开始，start表示开始搜索的位置，默认从array.length-1开始检索。

ES6 新增了三种方法：

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

let s = 'Hello world!'

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

// 这三个方法都支持第二个参数，表示开始搜索的位置。
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

2、repeat()

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

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

当 repeat 的参数不为正整数 和 0 时的情况：

// 参数是小数，会被取整
'na'.repeat(2.9) // 'nana'

// 参数是负数或者 Infinity，会报错
'na'.repeat(Infinity) // RangeError
'na'.repeat(-1) // RangeError

// 参数是 0 到-1 之间的小数，则等同于 0。因为会先进行取整运算，取整以后等于 -0，repeat 视同为 0。
'na'.repeat(-0.9) // ''

// 参数 NaN 等同于 0
'na'.repeat(NaN) // ''

// 参数是字符串，则会先转换成数字
'na'.repeat('na') // ''
'na'.repeat('3') // 'nanana'

3、padStart()、padEnd()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全，返回补全后达到指定长度的字符串。

padStart(targetLength, [str])用于头部补全，padEnd(targetLength, [str])用于尾部补全。targetLength 为字符串补全生效的最大长度， str 是用来补全的字符串，默认为空格。

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

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

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

// 如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串
'xxx'.padStart(2, 'ab') // 'xxx'
'xx'.padEnd(2, 'ab') // 'xx'

// 如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。
'abc'.padStart(10, '0123456789') // '0123456abc'

常见用途：为数值补全指定位数、提示字符串格式、日期格式化

// 生成 10 位的数值字符串
'1'.padStart(10, '0') // '0000000001'
'12'.padStart(10, '0') // '0000000012'
'123456'.padStart(10, '0') // '0000000012'

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

/**
 * 格式化日期
 * @param {Object} date new Date()
 * @param {Object} fmt 格式、'YYYY年mm月dd日 HH:MM:SS'
 */
export const dataFormat = (date, fmt) => {
	let ret
	const opt = {
		'Y+': date.getFullYear().toString(), // 年
		'm+': (date.getMonth() + 1).toString(), // 月
		'd+': date.getDate().toString(), // 日
		'H+': date.getHours().toString(), // 时
		'M+': date.getMinutes().toString(), // 分
		'S+': date.getSeconds().toString() // 秒
	}

	for (let k in opt) {
		ret = new RegExp('(' + k + ')').exec(fmt)
		if (ret) {
			fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
		}
	}
	
	return fmt
}

4、trimStart()、trimEnd()

trimStart() 和 trimEnd() 这两个方法，它们的行为与 trim() 一致，trimStart() 消除字符串头部的空格，trimEnd() 消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

const s = '  abc  '

s.trim() // 'abc'
s.trimStart() // 'abc  '
s.trimEnd() // '  abc'

除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。

浏览器还部署了额外的两个方法，trimLeft() 是 trimStart() 的别名，trimRight() 是trimEnd() 的别名。

5、at()

at() 方法接受一个整数作为参数，返回参数指定位置的字符，支持负索引（即倒数的位置）。

const str = 'hello'
str.at(1) // 'e' （等价 str[1]）
str.at(-1) // 'o' （str[-1] 返回 undefined）
str.at(7) // undefined （等价 str[7]）

如果参数位置超出了字符串范围，at() 返回 undefined。

代码007普通

打赏 收藏 海报 链接