ES6 学习(4) ---字符串的扩展

字符的Unicode表示法

　　ES6加强了对Unicode的支持,允许采用\uxxx形式表示一个字符(突然想起了字体图标)其中xxx就是字符的Unicode码点,但是,这种表示法只限于码点在\u0000~\uFFFF之间的字符,超出这个范围的字符,就必须用两个双字节的形式表示

字符串的遍历

　　ES6,使得字符串可以被for...of循环遍历

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

 

字符串模板(常用)

　　字符串模板是增强版的字符串,用反引号(``)标识,他可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中使用变量

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

 

注意:

　　1,如果在字符串模板中需要使用反引号,则前面要用反斜杠转义

　　2,如果使用字符串模板表示多行字符串,所有空格和缩进都会保留在输出之中,如果不想要换行的话,可以使用trim()方法来消除它

 

let str = `
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`
str = str.trim()

 

　　3, 在字符串模板中嵌入变量,需要将变量名写在${}之中,大括号内部可以放入任意的JavaScript表达式,可以进行运算,以及引用对象属性;

　　

let x = 1;
let y = 2;

`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

　　4,字符串模板中还能调用函数,函数一定要有返回值,否则返回值为undefined

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar,如果函数没有return,则为 "foo undefined bar" 

 

　　5,如果大括号的值不是字符串,将按照一般的规则转成字符串,如果,大括号是一个对象的话,将默认调用对象的toString方法,如果字符串模板中的变量没有声明,那么将会报错;

　　6, 字符串模板之中甚至还可以嵌入另一个字符串模板

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

 

字符串新增的方法 

 　　String.fromCodePoint()

　　　　ES5 提供String.fromCharCode()方法,用于从Unicode码点返回对应的字符,但是这个方法不能识别大于0xFFFF的字符,ES6 提供了String.fromCodePoint()方法,可以识别大于0xFFFF的字符,弥补了String.fromCharCode()方法的不足

　　String.raw()

　　　　该方法返回一个斜杠都被转义的字符串,一般会用在字符串模板的处理,个人理解:可以充当对字符串进行字符串模板形式的处理;但是这种处理方法会将斜杠"\"进行转义;

 

String.raw`Hi\\n`
// 返回 "Hi\\\\n"

String.raw`Hi\\n` === "Hi\\\\n" // true

 

　　　　String.raw()方法本质上是一个正常的函数,只是专门用于字符串模板的标签函数,如果写成函数形式,它的第一个参数,应该是一个具有raw属性的对象,且raw属性的值应该是一个数组,对应模板字符串解析后的值,它的代码实现基本情况如下:

 

String.raw = function (strings, ...values) {
  let output = '';
  let index;
  for (index = 0; index < values.length; index++) {
    output += strings.raw[index] + values[index];
  }

  output += strings.raw[index]
  return output;
}

 

例:

 

// `foo${1 + 2}bar`
// 等同于
String.raw({ raw: ['foo', 'bar'] }, 1 + 2) // "foo3bar"

 

MDN示例:

 

String.raw`Hi\n${2+3}!`;
// 'Hi\n5!'，Hi 后面的字符不是换行符，\ 和 n 是两个不同的字符

String.raw `Hi\u000A!`;             
// "Hi\u000A!"，同上，这里得到的会是 \、u、0、0、0、A 6个字符，
// 任何类型的转义形式都会失效，保留原样输出，不信你试试.length

let name = "Bob";
String.raw `Hi\n${name}!`;             
// "Hi\nBob!"，内插表达式还可以正常运行


// 正常情况下，你也许不需要将 String.raw() 当作函数调用。
// 但是为了模拟 `t${0}e${1}s${2}t` 你可以这样做:
String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t'
// 注意这个测试, 传入一个 string, 和一个类似数组的对象
// 下面这个函数和 `foo${2 + 3}bar${'Java' + 'Script'}baz` 是相等的.
String.raw({
  raw: ['foo', 'bar', 'baz'] 
}, 2 + 3, 'Java' + 'Script'); // 'foo5barJavaScriptbaz'

 

　　实例方法:codePointAt(), 该方法能够正确处理4个字节储存的字符,返回一个字符的码点;它的参数是字符串中的位置(从0开始)

 

let s = '𠮷a';

s.codePointAt(0) // 134071
s.codePointAt(1) // 57271

s.codePointAt(2) // 97

 

　　实例方法: normalize(), 在许多欧洲语言有语调符号和重音符号,ES6提供字符串实例的normalize()方法,用来将字符的不同表示方法统一为同样的形式,称为Unicode正规化

　　　　实例方法: includes(), startsWith(),endsWith(), 常用; 传统上,JavaScript只用indexOf方法,可以用来确定一个字符串是否包含另一个字符串,但是ES6有提供了以上三种方法;

　　　　- includes(): 返回布尔值,表示是否找到参数字符串;

　　　　- startsWith(): 返回布尔值,表示参数字符串是否在原字符串的头部;

　　　　- endsWith(): 返回布尔值,表示参数字符串是否在原字符串的尾部;

 

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

//这三个方法都支持第二个参数，表示开始搜索的位置。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

 

　　上面代码在使用第二个参数n时,endsWith的行为与其他两个方法有所不同,他针对前n个字符,而其他两个方法针对从第n个位置知道字符串结束;

　　实例方法: repeat()常用; repeat方法返回一个新字符串,表示将原字符串重复n此;

 

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

// 参数如果是小数,会被取整(向下取整)
 
'na'.repeat(2.9) // "nana"

// 如果repeat的参数是负数或者Infinity,会报错

'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError

// 但是如果参数是 0 到 -1 之间的小数,则等同于 0, 这是因为先进行取整运算,取整为-0,repeat会视同为0

'na'.repeat(-0.9) // ""

// 参数为NaN的时候等同于0

'na'.repeat(NaN) // ""

// 如果repeat的参数是字符串,则会先转换成数字

'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"

 

　　实例方法: padStart(),头部补全, padEnd()尾部补全

　　　　这两种方法一共接收两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串

 

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

 

// 如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

// 如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截取超出位数的补全字符串
'abc'.padStart(10, '0123456789')
// '0123456abc'

// 如果省略第二个参数,默认使用空格补全长度
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

// padStart()的常见用途是为了数值补全指定位数,下面代码生成10位的数值字符串
'1'.padStart(10, '0') // "0000000001"
'12'.padStart(10, '0') // "0000000012"
'123456'.padStart(10, '0') // "0000123456"

// 另一个用途是提示字符串格式 (利用超出被截取的规则)
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

 

　　实例方法: trimStart()消除字符串头部空格, trimEnd()消除尾部空格,他们返回的都是新的字符串,不会修改原始字符串

 

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

 

　　从上面的代码中可以看出,trimStart()只消除了头部的空格,trimEnd()也是类似行为,除了空格键这两个方法对字符串头部或尾部的tab符,换行符等不可见空白符号也是有效的;另外trimLeft()是trimStart()的别名,trimRight() 是trimEnd()的别名;

 

　　实例方法: matchAll()

　　　　matchAll()方法返回一个正则表达式在当前字符串的所有匹配;

 

 

 

———— 不生产代码，只是代码的搬用工