ES6基礎(chǔ)語法之字符串?dāng)U展的方法

發(fā)布時(shí)間：2022-05-05 10:17:14 來源：億速云閱讀：138 作者：zzz 欄目：開發(fā)技術(shù)

這篇文章主要介紹“ES6基礎(chǔ)語法之字符串?dāng)U展的方法”，在日常操作中，相信很多人在ES6基礎(chǔ)語法之字符串?dāng)U展的方法問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”ES6基礎(chǔ)語法之字符串?dāng)U展的方法”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

一、字符串的遍歷

JS中遍歷字符串：

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

ES6擴(kuò)展的遍歷字符串方法：

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

二、字符串識(shí)別、重復(fù)、補(bǔ)全

字符串識(shí)別：

ES6 之前判斷字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的識(shí)別方法。

includes()：返回布爾值，判斷是否找到參數(shù)字符串。

startsWith()：返回布爾值，判斷參數(shù)字符串是否在原字符串的頭部。

endsWith()：返回布爾值，判斷參數(shù)字符串是否在原字符串的尾部。

以上三個(gè)方法都可以接受兩個(gè)參數(shù)，需要搜索的字符串，和可選的搜索起始位置索引。

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個(gè)字符中去查找判斷)

字符串重復(fù)：

repeat()：返回新的字符串，表示將字符串重復(fù)指定次數(shù)返回

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

字符串補(bǔ)全：

padStart：返回新的字符串，表示用參數(shù)字符串從頭部（左側(cè)）補(bǔ)全原字符串。

padEnd：返回新的字符串，表示用參數(shù)字符串從尾部（右側(cè)）補(bǔ)全原字符串。

//使用padStart補(bǔ)全編號(hào)
let id = 25;
console.log((id+"").padStart(6,"0"));

三、模板字符串

模板字符串相當(dāng)于加強(qiáng)版的字符串，用反引號(hào) `,除了作為普通字符串，還可以用來定義多行字符串，還可以在字

符串中加入變量和表達(dá)式。

多行字符串使用：

//方案一：普通字符串換行
// 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 = "游戲,運(yùn)動(dòng),看書"; //保存愛好
// var obj = document.getElementById("content");
// obj.innerHTML = "<h3>大家好,我是"+name+",我的愛好有"+hobby+"</h3>";

//方案二:ES6模板字符串
// let name = "佩奇"; //保存姓名
// let hobby = "游戲,運(yùn)動(dòng),看書"; //保存愛好
// let obj = document.getElementById("content");
// obj.innerHTML = `<h3>大家好,我是${name},我的愛好有${hobby}</h3>`;

//字符串中嵌入變量
// let [name,hobby] = ["jack","抽煙,喝酒,燙頭"];
// let str = `大家好,我是${name},我喜歡${hobby}`;
// console.log(str);

模板字符串的注意點(diǎn)：

//(1)如果模板字符串中需要表示反引號(hào),用\轉(zhuǎn)義
// let str = `\`hello\``;
// console.log(str);

//(2)模板字符串內(nèi)可以放入表達(dá)式
// let x = 5;
// let y = 6;
// let str = `${x}*${y}=${x*y}`;
// console.log(str);

//(3)模板字符串中可以調(diào)用函數(shù)
// function fun()
// {
// 	return "hello,world!";
// }
// let str = `測(cè)試函數(shù)調(diào)用:${fun()},調(diào)用成功!`;
// 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]=["計(jì)算機(jī)技術(shù)","電子商務(wù)","國(guó)際貿(mào)易","工商管理"];
		let str = `
			<h3>專業(yè)列表如下</h3>
			<ul>
				<li>${pro1}</li>
				<li>${pro2}</li>
				<li>${pro3}</li>
				<li>${pro4}</li>
			</ul>
		`;
		document.getElementById("content").innerHTML=str;
	</script>
</html>

到此，關(guān)于“ES6基礎(chǔ)語法之字符串?dāng)U展的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

向AI問一下細(xì)節(jié)

ES6基礎(chǔ)語法之字符串?dāng)U展的方法

一、字符串的遍歷

二、字符串識(shí)別、重復(fù)、補(bǔ)全

三、模板字符串

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

一、字符串的遍歷

二、字符串識(shí)別、重復(fù)、補(bǔ)全

三、模板字符串