这篇文章主要介绍“ES6基础语法之字符串扩展的方法”,在日常操作中,相信很多人在ES6基础语法之字符串扩展的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”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 = "<h3>大家好,我是"+name+",我的爱好有"+hobby+"</h3>"; //方案二:ES6模板字符串 // let name = "佩奇"; //保存姓名 // let hobby = "游戏,运动,看书"; //保存爱好 // let obj = document.getElementById("content"); // obj.innerHTML = `<h3>大家好,我是${name},我的爱好有${hobby}</h3>`;
//字符串中嵌入变量 // 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 = ` <h3>专业列表如下</h3> <ul> <li>${pro1}</li> <li>${pro2}</li> <li>${pro3}</li> <li>${pro4}</li> </ul> `; document.getElementById("content").innerHTML=str; </script> </html>
到此,关于“ES6基础语法之字符串扩展的方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。