1. 字符串简介和创捷

当我们展现文本时需要一个变量以存储, 比如输出"helloworld" 时, 字符串就此展现

JavaScript 字符串用于存储和处理文本。 字符串可以存储一系列字符，如 "helloworld" 字符串可以是插入到引号中的任何字符。

copy
//可使用单引号或双引号
var name1 = "Volvo XC60";
var name2 = 'Volvo XC60';

//可以使用索引位置来访问字符串中的每个字符
var character = carname[7];

字符串的索引从 0 开始，这意味着第一个字符索引值为 [0]，第二个为 [1]，以此类推。

copy
const name = "RUNOOB";
let letter = name[2];
document.getElementById("demo").innerHTML = letter;
//网页页面展现出 N

字符串中使用引号，字符串中的引号不可以与字符串的引号相同:

copy
var answer = "It's helloworld.net"; //It's helloworld.net
var answer = "He is called 'xiaobai'"; //He is called 'xiaobai'
var answer = 'He is called "xiaobai"'; //He is called "xiaobai"

可以在字符串添加转义字符来使用引号

copy
var x = 'It\'s alright'; //It's hello
var y = "He is called \"Johnny\""; // He is called "xiaobai"

如果想知道字符串长度, 可使用内置属性 length 来计算字符串的长度

copy
var txt = "Isthere are xiaobai";
var sln = txt.length;
console.log(sln); //19

特殊字符 在 JavaScript 中，字符串写在单引号或双引号中。所以如下字符串 JavaScript 无法解析

copy
"you are so-called "xiaobai" from the HW.net"

字符串 "you are so-called " 被截断。

关于这个问题, 可以使用反斜杠 \ 来转义"xiaobai" 字符串中的双引号，如下:

copy
"you are so-called \"xiaobai"\ from the HW.net"

反斜杠是一个转义字符 转义字符将特殊字符转换为字符串字符： 转义字符 \ 可以用于转义撇号，换行，引号，等其他特殊字符。

下表中列举了在字符串中可以使用转义字符转义的特殊字符：

字符串可以是对象 一般来说, JavaScript 字符串是原始值，可以使用字符创建

copy
var firstName = "xiaobai";

但我们也可以使用 new 关键字将字符串定义为一个对象

copy
var secondName = new String("Daitu");

证明一下两种创建方式的区别

copy
var x = "Daitu";
var y = new String("xiaobai");
typeof x // 返回 String
typeof y // 返回 Object
(x === y) //false，x 是字符串，y 是对象
// === 为绝对相等，即数据类型与值都必须相等。

ps : 尽量不创建 String 对象(会拖慢执行速度且可能产生副作用)

2. 字符串属性和方法

原始值字符串，如 "xiaobai"(不是对象)没有属性和方法 原始值可以使用属性和方法，因为 JavaScript 在执行方法和属性时可把原始值当作对象。

字符串属性 | 属性 | 描述 | | ------------- | ---------------------------- | | constructor | 返回创建字符串属性的函数 | | length | 返回字符串的长度 | | prototype | 允许您向对象添加属性和方法 |

常见字符串方法

3. 模板字符串

模板字符串是一种方便的字符串语法，允许你在字符串中嵌入表达式和变量。

• 模板字符串使用反引号 ( `` ) 作为字符串的定界符分隔的字面量。

• 模板字面量是用反引号（ ` ）分隔的字面量，允许多行字符串、带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构。

copy
`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

参数

• string text：将成为模板字面量的一部分的字符串文本。 几乎允许所有字符，包括换行符和其他空白字符。 除非使用了标签函数，否则无效的转义序列将导致语法错误。

• expression：要插入当前位置的表达式，其值被转换为字符串或传递给 tagFunction

• tagFunction：如果指定，将使用模板字符串数组和替换表达式调用它，返回值将成为模板字面量的值

模板字符串的优势

copy
// 1. 可以同时使用单引号和双引号：
let text = `He's often called "xiaobai"`;
console.log(text); 
//He's often called "xiaobai"

// 2. 支持多行文本，无需使用特殊的转义字符
const multiLineText = `
  This is
  a multi-line
  text.
`;
console.log(multiLineText);
/*输出

  This is
  a multi-line
  text.

*/

// 3. 允许使用变量：
const name = 'xiaobai';
const age = 20;
const message = `My name is ${name} and I'm ${age} years old.`; //运行时求值

// 4. 允许使用表达式
let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`; //12.50

// 5. 当作HTML模板使用
let header = "";
let tags = ["RUNOOB", "GOOGLE", "TAOBAO"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}
html += `</ul>`;

有如下需要注意的

copy
//若要转义模板字面量中的反引号（`），需在反引号之前加一个反斜杠（\）
`\`` === "`"; // true( ` === `)

字符串和占位符被传递给一个函数（要么是默认函数，要么是自定义函数）。 默认函数（当未提供自定义函数时）只执行字符串插值来替换占位符，然后将这部分拼接到一个字符串中。