JavaScript青少年简明教程：字符串

JavaScript青少年简明教程：字符串

在JavaScript中，字符串是用来存储和操作文本的一种数据类型。字符串是一系列字符（如字母、数字、标点符号等）的集合，字符串可以包含零个或多个字符，常用于表达词语、句子或任何其他类型的文本内容。字符串是JavaScript的基本数据类型之一，通常用双引号（" "）或单引号（' '）括起来。还可以使用反引号（`）【反引号（`）与波浪号（~）共用一个键位】来创建模板字符串，它允许嵌入表达式。

字符串的创建

在JavaScript中，字符串创建：

☆使用字符串字面量，可以用单引号 (')、双引号 (")、反引号 (`)创建字符串 ：

   let greeting = "Hello, world!";

   console.log(greeting); // 输出 'Hello, world!'

其中反引号允许直接插入变量和表达式，这种字符串插值的写法被称为模板字面量。

使用反引号（`）来创建模板字符串，它允许嵌入表达式。例如：

   let name = 'Alice';

   let templateString = `Hello, ${name}!`;

如果字符串内部需要包含引号，则可以选择外部使用另一种引号。例如：

   let apostropheString = "It's a beautiful day!";

   let quoteString = 'She said, "Hello, world!"';

☆使用 String 构造函数：

   let str = new String("Hello, world!");

   console.log(str); // 输出 'Hello, world!'

在JavaScript中，无论是通过字符串字面量还是String构造函数创建的字符串，它们都是不可变的（immutable）。字符串是不可变的，这意味着一旦创建，字符串的内容就不能被修改。所有对字符串的操作都会返回一个新的字符串。

字符串的不可变性意味着一旦一个字符串被创建,你就不能直接修改它的内容。任何看起来像是修改字符串的操作，实际上都是在创建并返回一个新的字符串，而不会改变原有字符串。例如：

let str = "Hello";
str[0] = 'J';
console.log(str); // 输出 'Hello'，原字符串未改变

let strObject = new String("Hello");  
strObject[0] = 'J'
console.log(strObject); // 输出 'Hello'，原字符串未改变

JavaScript字符串不可变的（immutable）这种特性有利有弊，在大多数情况下提供了更多的优势。每次修改字符串实际上都在创建新的字符串对象，这可能会增加内存使用。字符串一旦创建就不会改变，这使得代码行为更容易预测；字符串的不可变性使得它们在多线程环境中更安全，因为不存在共享可变状态。

对于初学者来说，理解和正确使用不可变字符串可能需要一些时间。一个常见的误解是认为字符串方法会修改原始字符串。例如：

let str = "hello";
str.toUpperCase();
console.log(str);  // 仍然输出: "hello"

// 正确的用法是：
str = str.toUpperCase();
console.log(str);  // 现在输出: "HELLO"

在 JavaScript 中，字符串可以通过字符串字面量和 String 构造函数两种方式创建。这两种方式在使用上有一些区别：

1)存储方式：字符串字面量直接存储字符串的值，占用较小内存空间；而字符串对象存储的是对象引用。

2)性能：字符串字面量在一些操作上更高效，因为不涉及对象的创建和销毁。

3)自动转换：

在需要字符串值的上下文中，基本字符串会自动转化为临时 String 对象。

String 构造函数创建的实例本身就是对象，不需要转换。

4)typeof操作符结果不同：

字符串字面量：typeof "Hello, World!" 返回 "string"。

String构造函数：typeof new String("Hello, World!") 返回 "object"。注意，这里返回的是"object"而不是"string"，因为new String()实际上创建了一个字符串对象，而不是一个原始字符串值。

使用new String()创建字符串对象通常是不必要的，一般情况下，推荐使用字符串字面量创建字符串，因为它简单高效。只有在需要使用字符串对象的特性时，才需要使用 String 构造函数创建字符串对象。

使用字符串字面量是最常见和简单直接的方式，字符串可以用单引号 (')、双引号 (")、反引号 (`) 来声明。

在大多数情况下，单引号和双引号都可以互换使用，并且它们的行为是相同的。但在某些情况下，比如在字符串内部包含另一个相同类型的引号时，你可能需要使用另一种类型的引号来避免转义字符（反斜杠 \）。例如：

单引号声明字符串，并包含单引号（需要转义）

let str1 = '这是一个\'字符串\'，它包含了一个单引号'; 

console.log(str1); // 输出：这是一个'字符串'，它包含了一个单引号

用双引号声明字符串，并包含单引号（无需转义）

let str2 = "这是一个'字符串'，它包含了一个单引号"; 

console.log(str2); // 输出：这是一个'字符串'，它包含了一个单引号

这个例子中，由于我们使用双引号来声明字符串，所以我们可以直接在字符串内部使用单引号而无需转义。

模板字符串（template strings）

【更正式的叫法称为模板字面量（Template literals）模板字符串 - JavaScript | MDN 】

JavaScript 中使用反引号 (`) 声明的模板字符串——使用反引号（`）来创建模板字符串，这是一种增强的字符串字面量，允许多行字符串、内嵌表达式和更便捷的字符串操作，可以包含占位符——通过使用 ${} 来插入变量、表达式或函数调用的结果。模板字符串引入了 ES6 (ECMAScript 2015)，提供了更灵活和强大的字符串处理方式。其主要特点和作用：

1. 多行字符串

使用反引号，可以轻松创建包含多行内容的字符串，而不需要使用换行符或字符串连接操作。例如：

let multiLineString = `This is a string
that spans across
multiple lines.`;
console.log(multiLineString);

2. 内嵌表达式

使用 ${} 语法。这使得字符串插入变量变得非常简洁和直观。例如：

let name = 'Alice';
let greeting = `Hello, ${name}! Welcome to JavaScript.`;
console.log(greeting); // 'Hello, Alice! Welcome to JavaScript.'

内嵌表达式不仅限于变量，还可以是任意的 JavaScript 表达式。例如：

let a = 5;
let b = 10;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // 'The sum of 5 and 10 is 15.'

3. 标签模板

标签模板（Tagged Templates）是一种高级用法，允许你在处理模板字符串之前对其进行解析。标签模板的语法是在模板字符串前面加上一个标识符（函数名）。这对于创建自定义模板引擎或处理国际化字符串非常有用。

一个标签模板的基本形式是这样的：

function tagFunction(strings, ...values) {
  // 你的处理逻辑代码
  return result;
}

const result = tagFunction`template string ${expression} more template`;

其中，tagFunction 是一个函数，它接收模板字符串的静态部分作为第一个参数（字符串数组），后面跟着模板中的插值表达式。

模板字符串紧跟在函数名后面，不需要括号。

示例：

function logTag(strings, ...values) {
  console.log("Strings:", strings);
  console.log("Values:", values);
}

const personName = "Alice";  // 使用 personName 而不是 name
const age = 30;

logTag`Hello, my name is ${personName} and I am ${age} years old.`;
// 输出类似于：:
// Strings: ["Hello, my name is ", " and I am ", " years old."]
//Values: ["Alice", 30]

4. 原始字符串

使用 String.raw 方法，可以获取字符串的原始形式，不会对反斜杠进行转义处理。例如：

let rawString = String.raw`C:\Users\Alice\Documents`;
console.log(rawString); // 'C:\Users\Alice\Documents'

模板字符串大大简化了字符串操作的代码，提高了代码的可读性和维护性。

字符串length属性

可以通过 length 属性获取字符串的长度：

let str = 'Hello, World!';
console.log(str.length); // 13

字符串常用方法

☆字符串连接
使用 + 操作符或 concat 方法连接字符串：
let str1 = 'Hello';
let str2 = 'World';
let result = str1 + ', ' + str2 + '!'; // 使用 + 操作符
console.log(result); // 'Hello, World!'

let result2 = str1.concat(', ', str2, '!'); // 使用 concat 方法
console.log(result2); // 'Hello, World!'

☆字符串访问
可以使用 charAt 方法或索引来访问字符串中的字符：
let str = 'Hello, World!';
console.log(str.charAt(0)); // 'H'
console.log(str[0]); // 'H'

☆查找子字符串
使用 indexOf、lastIndexOf、includes、startsWith 和 endsWith 方法查找子字符串：
let str = 'Hello, World!';
console.log(str.indexOf('World')); // 7
console.log(str.includes('World')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true

☆提取子字符串
使用 slice、substring 和 substr 方法提取子字符串：
let str = 'Hello, World!';
console.log(str.slice(7, 12)); // 'World'
console.log(str.substring(7, 12)); // 'World'
console.log(str.substr(7, 5)); // 'World'

☆转换大小写
使用 toUpperCase 和 toLowerCase 方法转换字符串的大小写：
let str = 'Hello, World!';
console.log(str.toUpperCase()); // 'HELLO, WORLD!'
console.log(str.toLowerCase()); // 'hello, world!'

☆去除空白
使用 trim、trimStart 和 trimEnd 方法去除字符串两端的空白：
let str = '   Hello, World!   ';
console.log(str.trim()); // 'Hello, World!'
console.log(str.trimStart()); // 'Hello, World!   '
console.log(str.trimEnd()); // '   Hello, World!'

☆替换子字符串
使用 replace 和 replaceAll 方法替换字符串中的子字符串：
let str = 'Hello, World!';
let newStr = str.replace('World', 'JavaScript');
console.log(newStr); // 'Hello, JavaScript!'

let str2 = 'foo bar foo';
let newStr2 = str2.replaceAll('foo', 'baz');
console.log(newStr2); // 'baz bar baz'

☆拆分字符串
使用 split 方法将字符串拆分为数组：
let str = 'Hello, World!';
let arr = str.split(', ');
console.log(arr); // ['Hello', 'World!']

☆字符串与 Unicode
JavaScript 的字符串是基于 Unicode 的，支持多种字符集和符号。可以使用 Unicode 转义序列表示特殊字符：
let str = '\u00A9'; // ©
console.log(str); // '©'

通过这些方法和属性，可以有效地处理和操作字符串数据。在实际编程中，了解这些字符串操作的技巧非常有用。