【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。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>