二、ES6字符串重要扩展
一、字符串的遍历
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
建群声明: 本着技术在于分享,方便大家交流学习的初心,特此建立【编程内功修炼交流群】,为大家答疑解惑。热烈欢迎各位爱交流学习的程序员进群,也希望进群的大佬能不吝分享自己遇到的技术问题和学习心得!进群方式:扫码关注公众号,后台回复【进群】。
![](https://images.cnblogs.com/cnblogs_com/wml-it/2196906/o_230823011905_wxgzhss.png)