ES6-字符串方法合集

FE杂志社
94 阅读3分钟

.startsWith 与 .endsWith

.startsWidth检测是否以指定字符开头

const target = 'Lbxin-11';
target.startsWith('Lb'); //true
  1. 可以进行中英文普通字符的检测
const target = '--Lbxin-11';
target.startsWith('--Lb'); //true
  1. 区分大小写
const target = 'Lbxin-11';
target.startsWith('lb'); //false
  1. 支持跳过一定数量的字符来判断
const target = 'Lbxin-11';
target.startsWith('xin',2); //true

.endsWith 检测是否以指定字符结尾

const target = 'Lbxin-11';
target.endsWith('11'); //true

与.startsWith有类似功能

  1. 可以指定前多少个字符为检查对象，忽略后面的字符；
const target = 'Lbxin-11';
target.endsWith('-',6); //true

.includes

.includes检测是否包含指定的字符串

const target = 'Lbxin-11';
target.includes('xin'); //true

.repeat

.repeat 会重复当前字符串指定次数

const target = 'Lbxin-11';
target.repeat(3); //'Lbxin-11Lbxin-11Lbxin-11'
  1. 使用场景
    1.1. 指定字符串的重复；
    1.2. 空格对齐-重复空格到指定长度； 1.2. 当参数为负数时会报错，当为小数时会先进行取整操作(不会进)，然后再进行repeat操作； 
    const target = 'Lbxin-11';
' '.repeat(Math.max(10 - target.length,0))+target; //'  Lbxin-11'

    类似于.padStart首部补齐；

    const target = 'Lbxin-11';
target.padStart(10,' ') //'  Lbxin-11'
target.padEnd(9,'      ') // 'Lbxin-11  '

.padStart()与.padEnd()

.padStart()用于字符串头部补齐操作

  1. 参数为补全位数和补全的字符串；
'.lv'.padStart(8,'Lbxin') //'Lbxin.lv'

.padEnd()用于字符串尾部补齐操作；

  1. 参数为补全位数和补全的字符串；
'Lbxin'.padEnd(8,'.lv')  //'Lbxin.lv'

综合

  1. 如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。
'Lbxin'.padStart(5,'.lv') //'Lbxin'
'Lbxin'.padEnd(5,'.lv') //'Lbxin'
  1. 如果原字符串和补齐字符串的长度总和大于补全位数，则会截取超出位数的补全字符串；
'Lbxin'.padStart(9,'.lv123456') //'.lv1Lbxin'
'Lbxin'.padEnd(9,'.lv123456') //'Lbxin.lv1'
  1. 当省略第二个参数时，默认用空格来补齐；
'Lbxin'.padStart(9) //'    Lbxin'
'Lbxin'.padEnd(9) //'Lbxin    '

模板字符串

` 反转义

let target = 'Lbxin'
let name = `my name \`s ${target}`  // my name `s Lbxin

模板字符串可以包含任意变量、方法、表达式等，也可以进行相应的嵌套操作；

let target = 'Lbxin'
const age = () => 23
let name = `my name \`s ${`${target}`} age is ${age()} class is ${10 + 1}`;
//my name `s Lbxin age is 23 class is 11

标签模板

标签模板即就是将函数的调用方式转换成模板字符串的方式；

alert`Lbxin`

当一个函数使用模板字符串的方式调用时， 这个函数就可以被称为标签函数

//stringArr: 原字符串切割后的数组
//values: 变量数组
function SaferHTML(stringArr,...values) {
  console.log(stringArr,'s=========',values)
  let s = stringArr[0]
  for (let i = 0; i < values.length; i++) {
    let strValue = String(values[i]);
    s += strValue.replace(/&/g, "&amp;")  //转义 &    ==>    &amp;
            .replace(/</g, "&lt;")        //转义 <    ==>    &lt;
            .replace(/>/g, "&gt;");       //转义 >    ==>    &gt;

    s += stringArr[i+1];
  }
  return s;
}
//获取input输入框的内容
let sender = '<script>alert("这是恶意代码")</script>'; 
//拼接内容显示在页面中
let appendHtml = SaferHTML`<p>您输入的是${sender}</p>${1}<span>123 </span>`
// let appendHtml = SaferHTML(`<p>您输入的是${sender}</p>`)
// $("body").append(appendHtml)
console.log(appendHtml,'appendHtml=========')

.raw

.raw 为原生String提供了一个将斜杠也转义的字符串(一个斜杠转义为两个，一次类推)，常用于模板字符串的处理方法；

String.raw`Lbxin\n${10+1}.class` // 'Lbxin\\n11.class'

2.也可以与已经转义的字符进行比较

codePointAt

ES6提供了codePointAt的API进行正确处理四个字节存储的字符，返回一个字符的码点值；但还是会依赖于字符串长度和具体的字节值；

有些字符需要四个字节(长度为2)进行存储，如"𠮷"等一些表意文字，此时js判断length就会出错，而且正常的js原生字符串API也不能正确进行处理，如charAt()无法正确读取整个字符串，charCodeAt()方法只能返回前两个和后两个字节的值；

let s = '𠮷a';
s.codePointAt(0) // 134071 此时为𠮷的码点值
s.codePointAt(0).toString(16) // "20bb7"
s.codePointAt(1) // 57271 此时将𠮷的后两个字节和a的字节统一算上返回码点值
s.codePointAt(2) // 97 此时为a的码点值
  1. codePointAt返回的是十进制的数据，要想获取十六进制的数据可以使用toString进行转化；
  2. 解决codePointAt参数依赖于字节长度和具体节点值的方案是使用for...of循环，该循环方法会返回识别的32位的UTF-16的字符；
let s = '𠮷a';
for (let ch of s) {
    console.log(ch.codePointAt(0).toString(16));
}
// 20bb7
// 61
  1. codePointAt方法的另一个作用是检测一个字符是由两个字节还是四个字节组成的；
function is32Bit(str){
 return str.codePointAt(0) > 0xFFFF
}
is32Bit("𠮷") // true
is32Bit("a") // false

is32Bit("𠮷a") // true
is32Bit("a𠮷") // false
//`codePointAt(0)`在遇到字符时会取出第一个字符进行判断，传1时会将前一个字符的后两位字节值和第二个字符的字节进行一起匹配判断返回；
avatar
文章
阅读
粉丝