ECMAScript 6学习笔记之----字符串的扩展

String的基本方法charAt,concat,slice,substr,indexOf,trim

var stringObject = new String(" hello, world ");

print(stringObject.charAt(0));
print(stringObject[1]);
print(stringObject.concat([',java', 'go']))

print(stringObject)


print(stringObject.slice(2));
print(stringObject.slice(-3));
print(stringObject.slice(3,-4));
print(stringObject.slice(-6,-4));
print(stringObject.substr(3,3));
print(stringObject.indexOf("o"));
print(stringObject.lastIndexOf("o"));
print(stringObject.trim());

----- 
-----h
----- hello, world ,java,go
----- hello, world 
-----ello, world 
-----ld 
-----llo, wo
-----wo
-----llo
-----5
-----9
-----hello, world

扩展方法at ,inculdes ,startWith ,endsWith ,padStart, padEnd

ES6 提供了三种新方法。

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

let s = 'Hello world!';

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


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

repeat方法返回一个新字符串，表示将原字符串重复n次。

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

-----xxx
-----hellohello
-----

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

print('x'.padStart(4, 'ab'))
print('x'.padEnd(4, 'ab'))

print('xfg'.padStart(4, 'ab'))
print('xfg'.padEnd(4, 'ab'))

-----abax
-----xaba
-----axfg
-----xfga

模板字符串

普通模板

 模板字符串template string是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

let name = "zc", time = "today";
print(`hello ${name}, how are you ${time}?`);

let name = "zc", time = "today";
print(`hello ${name}, how are you ${time}?`);

模板调用函数

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

function fn() {
    return "hello es6"
}

print(`${fn()} !!!`)

-----hello es6 !!!

 模板字符串的变量之中，又嵌入了另一个模板字符串，使用方法如下:

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

const addr = [
    {first: 'dz', last: 'bod'},
    {first: 'dz1', last: 'bod1'},
]

print(tmp1(addr))

输出如下：

-----
    <table>
    
    <tr><td>dz</td></tr>
    <tr><td>bod</td></tr>
    
    <tr><td>dz1</td></tr>
    <tr><td>bod1</td></tr>
    
    </table>

标签模板

 标签模板其实不是模板，而是函数调用的一种特殊形式。“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。
 但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。

let a = 5;
let b = 6;
let str = tag`hello ${a+b} world ${a*b}`;
print(str)
print(tag(['Hello ', ' world ', ''], 15, 50))

function tag(stringArr, value1, value2){
    return stringArr.concat(value1).concat(value2);
}

-----hello , world ,,11,30
-----Hello , world ,,15,50

 tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。
 tag函数的其他参数，都是模板字符串各个变量被替换后的值。由于本例中，模板字符串含有两个变量，因此tag会接受到value1和value2两个参数。

 tag函数所有参数的实际值如下。

• 第一个参数：['Hello ', ’ world ', ‘’]
• 第二个参数: 15
• 第三个参数：50

raw

ES6 还为原生的String对象，提供了一个raw方法。

String.raw方法，往往用来充当模板字符串的处理函数，返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，对应于替换变量后的模板字符串。

print(String.raw({raw:'test'},0,1,2));
print(String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2))


-----t0e1s2t
-----t0e1s2t