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

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

JavaScript 语言的单引号和双引号字符串字面量语法上没有区别，所以以下一并讲解。

//单引号字符串字面量表达式的返回值
let s1 = 'hello';
s1;  // "hello"
typeof s1;  // "string"

//双引号字符串字面量表达式的返回值
let s2 = "hello";
s2;  // "hello"
typeof s2;  // "string"

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

单引号和双引号字符串字面量不支持字符串插值。

单引号和双引号字符串字面量支持在每行末尾添加一个转义字符反斜杠 \ 转义隐式的换行符从而跨多行编写一行代码。注意：转义字符反斜杠 \ 以及后面的隐式的换行符不占用字符。

let str1 = 'one\
long\
line';

let str2 = "one\
long\
line";

console.log(str1);
console.log(str2);
//都输出
onelongline
onelongline

单引号和双引号字符串字面量不支持隐式的换行符。

let c = 'first line
second line';

console.log(c);
//报错
Uncaught SyntaxError: "" string literal contains an unescaped line break

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

2.模板字面量(Template Literal)

//模板字面量表达式的返回值
let s = `hello`;
s;  // "hello"
typeof s;  // "string"

模板字面量支持所有转义序列。

模板字面量支持字符串插值。

模板字面量支持在每行末尾添加一个转义字符反斜杠 \ 转义隐式的换行符从而跨多行编写一行代码。

注意：转义字符反斜杠 \ 以及后面的隐式的换行符不占用字符。

let str3 = `one\
long\
line`;

console.log(str3);
//输出
onelongline

模板字面量支持隐式的换行符。注意：此隐式的换行符占用一个字符。

let s = `first line
second line`;

console.log(s);
//输出
first line
second line

模板字面量支持带标签(tag)。

标签函数名`模板字面量`;

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

传递给标签函数的实参 `模板字面量` 的外围无圆括号。

带标签的模板字面量的返回值就是标签函数的返回值。

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

标签函数的第一个形参接受一个被插值记号 ${} 分隔的字符串组成的数组，其余的表达式形参与模板字面量中的表达式的值按顺序一一对应。注意：对于有 n 个插值的模板字面量，传递给标签函数的表达式形参的个数始终是 n，而传递给标签函数的第一个形参所包含的字符串个数则始终是 n + 1。

标签函数的返回值，可以返回处理好的的字符串 或者 可以返回完全不同的东西(不一定返回字符串)。

const person = "Mike";
const age = 28;

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

  const ageStr = ageExp < 100 ? "youngster" : "centenarian";

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

const output = myTag`That ${person} is a ${age}.`;

console.log(output);

//输出
That Mike is a youngster.

//注意：对于有n个插值的模板字面量，传递给标签函数的表达式形参的个数始终是n，而传递给标签函数的第一个形参所包含的字符串个数则始终是n+1。
let a = 6;
let b = 9;
function simpleTag(strings, ...exp) {
  console.log(strings);
}

simpleTag`${ a } + ${ b } = ${ a + b }`;

//输出
[ "", " + ", " = ", "" ]

3.访问字符串中的字符

可以把字符串当成由字符组成的数组，所以可以使用类似数组中变量名后跟方括号 [] 包含索引的方式来访问字符串中索引对应的字符。

另外，还可以使用 charAt() 和 at() 实例方法访问字符串中索引对应的字符。

注意：负数索引 index，本质上是 str.length + index 的正数索引。

//[]
//正数索引从左往右从0开始，不支持负数索引。
//查看
let a = str[索引];

//添加或更改(不支持此语法)
str[索引] = 值;

//charAt()
//正数索引从左往右从0开始，不支持负数索引。
//查看
let a = str.charAt(索引);

//添加或更改(不支持此语法）
str.charAt(索引) = 值;

//at()
//正数索引从左往右从0开始，负数索引从右往左从-1开始。
//查看
let a = str.at(索引);

//添加或更改(不支持此语法）
str.at(索引) = 值;

4.字符串长度

无论是单引号和双引号字符串字面量、模板字面量，一个空格占用一个字符。

注意：length 属性是只读的。

//查看长度
let len = str.length;

5.字符串连接

可以使用加号 + 连接字符串，表达式的返回值的类型只可以为 字符串类型(包括空字符串)。

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

let interpolatedString = value + ' to the ' + exponent + ' power is ' + (value * value);

interpolatedString;  // "5 to the second power is 25"

6.字符串插值

花括号 {} 内可以为任何 JavaScript 表达式，具体参考“表达式语句”章节。

表达式的返回值的类型只可以为 字符串类型(包括空字符串)，最终字符串引号内的内容会替代美元符号、花括号以及花括号内的所有内容，即 ${ 表达式 }。

${ 表达式 }

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

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

interpolatedTemplateLiteral;  // "5 to the second power is 25"

7.转义序列(Escape Sequence)

转义序列是由转义字符(escape character)反斜杠 \ 和 跟在它后面的 1 个或多个字符构成的字符序列。

\1个或多个字符

转义序列，顾名思义，就是转义字符反斜杠 \ 转换了跟在它后面的字符的通常含义，从而实现在字符串中表示一个无法直接表示的字符。

注意：单引号、双引号、反引号中的任何一种都可以直接嵌入到另外两种引号的字符串中，但如果嵌入到同一种引号的字符串中时，需要转义。

注意：一个转义序列(包括转义字符反斜杠 \ 以及跟在它后面的字符)只占用一个字符。

注意：如果转义字符反斜杠 \ 的后面未跟任何字符(无论显式还是隐式)，此时转义字符反斜杠 \ 无法完成转义，会报错 Uncaught SyntaxError: invalid escape sequence。

注意：如果转义字符反斜杠 \ 位于以下表中之外的字符前面，则转义字符反斜杠 \ 会被忽略。