ES6字符串扩展详解:遍历、识别、重复与模板字符串

作者:木棉

时间:2026-10-25

浏览:569

本文详解ES6字符串的新特性,涵盖for...of遍历、includes/startsWith/endsWith识别、repeat重复及padStart/padEnd补全方法,并深入解析模板字符串的多行处理、变量嵌入与表达式计算功能。

文章目录

字符串遍历

在JavaScript中,传统方式遍历字符串通常通过循环索引逐个获取字符。

var str = "hello,world";
for(var i = 0;i<str.length;i++)
{
	console.log(str[i]);
}

ES6引入了更简洁的字符串遍历机制,允许直接迭代字符串中的字符。

let str = "hello,world";
for(let c of str)
{
	console.log(c);
}

字符串的识别、重复与补全操作

关于字符串内容的识别功能。

在ES6发布之前,开发者主要依赖indexOf方法来检测子串是否存在。ES6新增了三套专门用于子串识别的方法,提供了更语义化的判断方式。

includes()方法:该方法返回布尔值,用于判断目标字符串是否存在于原字符串中。

startsWith()方法:该方法返回布尔值,用于判断目标字符串是否位于原字符串的起始位置。

endsWith()方法:该方法返回布尔值,用于判断目标字符串是否位于原字符串的末尾位置。

上述三个方法均支持接收两个参数:第一个参数为需要搜索的目标字符串,第二个参数为可选的搜索起始索引位置。

let str = "jack,rose,mike";
console.log(str.includes("rose")); //true
console.log(str.includes("rose",5)); //true
console.log(str.startsWith("jack")); //true
console.log(str.startsWith("rose",5));//true
console.log(str.endsWith("mike")) //true
console.log(str.endsWith("se",9)) //true(前面9个字符中去查找判断)

字符串的重复操作

repeat()方法:该方法返回一个新字符串,表示将原字符串重复指定的次数。

let str = "hello,";
console.log(str.repeat(3));

字符串的补全操作

padStart()方法:该方法返回一个新字符串,使用指定的参数字符串从原字符串的头部(左侧)进行补全,直至达到指定长度。

padEnd()方法:该方法返回一个新字符串,使用指定的参数字符串从原字符串的尾部(右侧)进行补全,直至达到指定长度。

//使用padStart补全编号
let id = 25;
console.log((id+"").padStart(6,"0"));

模板字符串

模板字符串是增强版的字符串表示形式,使用反引号(`)定义。它不仅可以作为普通字符串使用,还支持定义多行字符串,并能在字符串内部直接嵌入变量和表达式。

这种特性使得字符串拼接更加直观和便捷。

以下是多行字符串的具体使用示例。

//方案一:普通字符串换行
// let str = `I Love JS\nI Love ES`;
// console.log(str);

//方案二:多行字符串
// let str = `I Love JS
// I Love ES`;
// console.log(str);

以下是如何在字符串中插入变量的示例。

//方案一:JS拼接字符串
// var name = "佩奇"; //保存姓名
// var hobby = "游戏,运动,看书"; //保存爱好
// var obj = document.getElementById("content");
// obj.innerHTML = "<h2>大家好,我是"+name+",我的爱好有"+hobby+"</h2>";

//方案二:ES6模板字符串
// let name = "佩奇"; //保存姓名
// let hobby = "游戏,运动,看书"; //保存爱好
// let obj = document.getElementById("content");
// obj.innerHTML = `<h2>大家好,我是${name},我的爱好有${hobby}</h2>`;
//字符串中嵌入变量
// let [name,hobby] = ["jack","抽烟,喝酒,烫头"];
// let str = `大家好,我是${name},我喜欢${hobby}`;
// console.log(str);

使用模板字符串时需要注意以下几点细节。

//(1)如果模板字符串中需要表示反引号,用\转义
// let str = `\`hello\``;
// console.log(str);

//(2)模板字符串内可以放入表达式
// let x = 5;
// let y = 6;
// let str = `${x}*${y}=${x*y}`;
// console.log(str);

//(3)模板字符串中可以调用函数
// function fun()
// {
// 	return "hello,world!";
// }
// let str = `测试函数调用:${fun()},调用成功!`;
// console.log(str);

以下是利用模板字符串动态输出列表的示例。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模板字符串中输出列表</title>
	</head>
	<body>
		<div id="content">		
		</div>		
	</body>
	<script>
		let [pro1,pro2,pro3,pro4]=["计算机技术","电子商务","国际贸易","工商管理"];
		let str = `
			<h2>专业列表如下</h2>
			<ul>
				<li>${pro1}</li>
				<li>${pro2}</li>
				<li>${pro3}</li>
				<li>${pro4}</li>
			</ul>
		`;
		document.getElementById("content").innerHTML=str;
	</script>
</html>

以上就是关于ES6基础语法中字符串扩展功能的详细介绍,希望对读者有所帮助。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章