【04】ES6:字符串的扩展

一、模板字符串

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

1、使用反单引号

传统字符串字面量使用单引号 '' 或者双引号 "",模板字符串使用反单引号(backquote) ``

javascript 复制代码
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} 会转化为字符串和前后的字符串拼接,如果有的话。

javascript 复制代码
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、模板字符串可以有多行文本

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

javascript 复制代码
// 一般字符串
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():返回布尔值,表示参数字符串是否在原字符串的尾部。
javascript 复制代码
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 次。

javascript 复制代码
'x'.repeat(3) // 'xxx'
'hello'.repeat(2) // 'hellohello'
'na'.repeat(0) // ''

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

javascript 复制代码
// 参数是小数,会被取整
'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 是用来补全的字符串,默认为空格。

javascript 复制代码
'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'

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

javascript 复制代码
// 生成 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'
javascript 复制代码
/**
 * 格式化日期
 * @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() 消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。

javascript 复制代码
const s = '  abc  '

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

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

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

5、at()

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

javascript 复制代码
const str = 'hello'
str.at(1) // 'e' (等价 str[1])
str.at(-1) // 'o' (str[-1] 返回 undefined)
str.at(7) // undefined (等价 str[7])

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

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪8 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪8 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试