2.2JavaScript原始类型之字符串(String)

1.单引号字符串和双引号字符串

JavaScript 语言的单引号字符串与双引号字符串一样，没有区别，所以以下一并讲解。

let 字符串名 = 'string';
let 字符串名 = "string";

单引号字符串和双引号字符串支持所有转义序列。

单引号字符串和双引号字符串支持使用转义语句结尾换行符的方式跨多行编写一行代码。

单引号字符串和双引号字符串不支持对应引号内部的空格。

单引号字符串和双引号字符串不支持对应引号内部的字符串插值。

单引号字符串和双引号字符串不支持带标签。

//跨多行编写一行代码
let str1 = 'one\
long\
line';

let str2 = "one\
long\
line";

//都输出
onelongline
onelongline

2.反引号字符串

let 字符串名 = `string`;

反引号字符串支持所有转义序列。

反引号字符串支持使用转义语句结尾换行符的方式跨多行编写一行代码。

反引号字符串支持反引号内部的空格。

反引号字符串支持反引号内部的字符串插值。

反引号字符串支持带标签。

//跨多行编写一行代码
let str3 = `one\
long\
line`;

//都输出
onelongline

//反引号内部的空格
let c = `first line
second line`;

//输出
first line
second line

3.访问字符串

一个字符串就是由一系列的字符组成，所以可以用类似数组中的方括号包含对应的数字来访问，但不可以修改字符。

//索引从左往右，从0开始。
let a = str[索引];

4.字符串长度

str.length

5.字符串连接

let value = 5;
let exponent = 'second';

//传统字符串连接插值方式
let interpolatedString = value + ' to the ' + exponent + ' power is ' + (value * value);

console.log(interpolatedString);
//输出
5 to the second power is 25

6.字符串插值

${}内支持变量、常量、函数(方法)等表达式。

let value = 5;
let exponent = 'second';

let interpolatedTemplateLiteral = `${ value } to the ${ exponent } power is ${ value * value }`;

console.log(interpolatedTemplateLiteral);
//输出
5 to the second power is 25

7.带标签(Tag)的字符串

带标签的字符串使您可以用函数处理跟在标签后的反引号字符串。

标签函数的名称与普通函数一样，没有特殊性。

标签函数的第一个参数为一个包含字符串值的数组，其余的参数与表达式相关。最后，标签函数可以返回处理好的的字符串 或者 它可以返回完全不同的东西（不一定返回字符串）。

let person = 'Mike';
let age = 28;

function myTag(strings, personExp, ageExp) {
  let str0 = strings[0]; // "That "
  let str1 = strings[1]; // " is a "
  let str2 = strings[2]; // "."

  let ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  return `${str0}${personExp}${str1}${ageStr}${str2}`;
}

//按命名传递方式
let output = myTag`That ${ person } is a ${ age }.`;

console.log(output);

//输出 
That Mike is a youngster.

function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

//按位置传递方式
var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A');  // "YAY!"
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'});  // "Hello World!"

8.转义序列