二、ES6字串重要擴充套件
阿新 • • 發佈:2022-03-06
一、字串的遍歷
JS中遍歷字串:
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>
本文來自部落格園,作者:農碼一生,轉載請註明原文連結:https://www.cnblogs.com/wml-it/p/15967775.html
技術的發展日新月異,隨著時間推移,無法保證本部落格所有內容的正確性。如有誤導,請大家見諒,歡迎評論區指正!
個人開原始碼連結,歡迎點亮:
GitHub:https://github.com/ITMingliang
Gitee:https://gitee.com/mingliang_it
GitLab:https://gitlab.com/ITMingliang
進開發學習交流群: