【ES6】字符串新增拓展

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

一、新增方法

• includes()：返回布尔值，判断是否找到参数字符串。

• startsWith() 方法用于检测字符串是否以指定的子字符串开始。返回布尔值。

  let str = "http://www.baidu.com";
  if(str.startsWith('https://')){
  	alert('普通网址！')
  }else if(str.startsWith('https://')){
  	alert('加密网址！')
  }else{
  	alert('其它网址！')
  }
  

• endsWith() 方法用于检测字符串是否以指定的子字符串结尾。返回布尔值。

  let str = "test.txt";
  if(str.endsWith('.txt')){
  	alert("文本文件")
  }else if(str.endsWidth('.png')){
  	alert("png图片文件")
  }else{
  	alert("其它文件")
  }
  

• repeat(count) 将字符串重复指定次数返回。

  参数 count 介于 0 和 +Infinity 之间的整数。表示在新构造的字符串中重复了多少遍原字符串。

  console.log("Hello,".repeat(2));  // "Hello,Hello,"
  

• padStart(targetLength, padString?)：方法用另一个字符串填充当前字符串（如果需要的话，会重复多次），以便产生的字符串达到给定的长度。从当前字符串的左侧开始填充。

• padEnd(targetLength, padString?)：方法会用一个字符串填充当前字符串（如果需要的话则重复填充），返回填充后达到指定长度的字符串。从当前字符串的末尾（右侧）开始填充。

  • targetLength 当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
  • padString 填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的默认值为 " "

  // padStart() 首部填充
  'abc'.padStart(10);         // "       abc"
  'abc'.padStart(10, "foo");  // "foofoofabc"
  'abc'.padStart(6,"123465"); // "123abc"
  'abc'.padStart(8, "0");     // "00000abc"
  'abc'.padStart(1);          // "abc"
  
  // padEnd() 尾部填充
  'abc'.padEnd(10);          // "abc       "
  'abc'.padEnd(10, "foo");   // "abcfoofoof"
  'abc'.padEnd(6, "123456"); // "abc123"
  'abc'.padEnd(1);           // "abc"
  

二、模板字符串

模板字符串相当于加强版的字符串，用反引号 ` 标识。有如下用法：

• 可以通过换行拼凑大段字符串代码
• 使用 ${标识符} 获取变量或参数等数据

let title = "标题";
let content = "内容";

// 之前的字符串拼接方式
let str = "<div>";
	str += "<h1>" + title + "</h1>";
	str += "<p>" + content + "</p>";
	str += "</div>";
	
// 模板字符串
let str2 = `<div>
				<h1>${title}</h1>
				<p>${content}</p>
			</div>`

---

关注公众号：前端知识分享喵，获取前端学习资料