ES6之字符串学习

Posted 2020-09-28 坚持不懈?

以下是常用的方法不是全部方法

1.codePointAt()方法

有一些字段需要4个字节储存，这样charCodeAt方法的返回就是不正确的，用codePointAt()方法就可以返回

十进制的值。如果要十六进制的值，可以使用toString方法转换

var s = ‘??a‘;

s.codePointAt(0).toString(16) // "20bb7"
s.codePointAt(2).toString(16) // "61"

2.String.fromCodePoint() 

有一些字段需要4个字节储存，这样fromCharCode( 可接受一个指定的 Unicode 值，然后返回一个字符串) 方法

不能正确返回。fromCodePoint弥补它的不足

String.fromCodePoint(0x20BB7)
// "??"
String.fromCodePoint(0x78, 0x1f680, 0x79) === ‘x\uD83D\uDE80y‘
// true

fromCodePoint与codePointAt方法相反。

3.字符串的遍历器接口

字符串可以被for...of循环遍历。

var text = String.fromCodePoint(0x20BB7);

for (let i = 0; i < text.length; i++) {
  console.log(text[i]);
}
// " "
// " "

for (let i of text) {
  console.log(i);
}
// "??"

4.at()（对原来的charAt()方法的弥补）

charAt()方法是返回在指定位置的字符。该方法不能识别码点大于0xFFFF的字符。

‘abc‘.charAt(0) // "a"
‘??‘.charAt(0) // "\uD842"

5.includes(),startsWith(),endsWith()

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部。

6.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到-1之间的小数，取整以后等于-0，repeat视同为0。 

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

参数NaN等同于0。

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

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

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

7.padStart(),padEnd()

某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，

padEnd()用于尾部补全 

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

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

如果原字符串的长度，等于或大于指定的最小长度，则返回原字符串。

如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，

则会截去超出位数的补全字符串。 

‘abc‘.padStart(10, ‘0123456789‘)
// ‘0123456abc‘

如果省略第二个参数，默认使用空格补全长度。

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"

8.模板字符串

传统的javascript语言，输出模板通常是这样写的。

$(‘#result‘).append(
  ‘There are <b>‘ + basket.count + ‘</b> ‘ +
  ‘items in your basket, ‘ +
  ‘<em>‘ + basket.onSale +
  ‘</em> are on sale!‘
);

上面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题。

$(‘#result‘).append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

模板字符串（template string）是增强版的字符串，用反引号（`）标识。

它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串

中嵌入变量。

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

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

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

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

大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性

var x = 1;
var y = 2;

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

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

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

模板字符串之中还能调用函数。

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

`foo ${fn()} bar`
// foo Hello World bar

如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个

对象，将默认调用对象的toString方法。

如果模板字符串中的变量没有声明，将报错。

如果需要引用模板字符串本身，在需要时执行，可以像下面这样写。

// 写法一
let str = ‘return ‘ + ‘`Hello ${name}!`‘;
let func = new Function(‘name‘, str);
func(‘Jack‘) // "Hello Jack!"

// 写法二
let str = ‘(name) => `Hello ${name}!`‘;
let func = eval.call(null, str);
func(‘Jack‘) // "Hello Jack!"

9.实例：模板编译

下面，我们来看一个通过模板字符串，生成正式模板的实例。 

var template = `
<ul>
  <% for(var i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

10.标签模板

模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，

该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。

alert`123`
// 等同于
alert(123)

标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

“标签模板”的一个重要应用，就是过滤html字符串，防止用户输入恶意内容。

var message =
  SaferHTML`<p>${sender} has sent you a message.</p>`;

function SaferHTML(templateData) {
  var s = templateData[0];
  for (var i = 1; i < arguments.length; i++) {
    var arg = String(arguments[i]);

    // Escape special characters in the substitution.
    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");

    // Don‘t escape special characters in the template.
    s += templateData[i];
  }
  return s;
}

模板字符串本身并不能取代Mustache之类的模板库，因为没有条件判断和循环处理功能，

但是通过标签函数，你可以自己添加这些功能。

// 下面的hashTemplate函数
// 是一个自定义的模板处理函数
var libraryHtml = hashTemplate`
  <ul>
    #for book in ${myBooks}
      <li><i>#{book.title}</i> by #{book.author}</li>
    #end
  </ul>
`;

10.String.raw()

String.raw方法，往往用来充当模板字符串的处理函数，返回一个斜杠都被转义

（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。

String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"

String.raw`Hi\u000A!`;
// ‘Hi\\u000A!‘

如果原字符串的斜杠已经转义，那么String.raw不会做任何处理。

 

 

 

 

引自：http://es6.ruanyifeng.com/#docs/stri ng#String-fromCodePoint