深入理解 JavaScript 字符串 - ruanyf/jstutorial 解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00896/article/details/148505445

深入理解 JavaScript 字符串 - ruanyf/jstutorial 解析

jstutorial Javascript tutorial book 项目地址: https://gitcode.com/gh_mirrors/js/jstutorial

字符串基础概念

字符串是 JavaScript 中最基础也最重要的数据类型之一，它表示由零个或多个字符组成的序列。在 JavaScript 中，字符串可以用单引号('')或双引号("")来定义。

字符串定义的最佳实践

在实际开发中，我们通常遵循以下约定：

项目统一使用单引号或双引号，保持风格一致
由于 HTML 属性通常使用双引号，JavaScript 中更推荐使用单引号
字符串内容包含引号时，需要进行转义处理

// 推荐写法
const message = 'This is a string';
const quote = 'He said, "Hello!"';
const escapeExample = 'Don\'t forget to escape!';

字符串的特殊处理

多行字符串的处理

JavaScript 中的字符串默认不能跨越多行，但有以下几种处理多行内容的方法：

使用反斜杠续行（注意反斜杠后不能有空格）

const longString = 'This is a very \
long string that spans \
multiple lines';

使用字符串连接符

const longString = 'This is a very ' +
  'long string that spans ' +
  'multiple lines';

ES6 模板字符串（更现代的解决方案）

const longString = `This is a very
long string that spans
multiple lines`;

转义字符详解

转义字符是字符串中表示特殊字符的序列，常见的有：

| 转义序列 | 含义 | Unicode 表示 | |---------|---------------------|-------------| | \n | 换行符 | \u000A | | \t | 制表符 | \u0009 | | \' | 单引号 | \u0027 | | \" | 双引号 | \u0022 | | \\ | 反斜杠 | \u005C | | \uXXXX | Unicode 字符 | XXXX为4位十六进制 |

console.log('Line 1\nLine 2');  // 输出两行文本
console.log('Path: C:\\Windows');  // 输出反斜杠

字符串与字符集

Unicode 处理

JavaScript 使用 Unicode 字符集存储字符串，但有一个重要限制：它只能正确处理两字节（即码点在 U+0000 到 U+FFFF 之间）的字符。对于四字节字符（如一些表情符号），JavaScript 会错误地识别为两个字符。

'𝌆'.length;  // 返回2，实际应为1
'😊'.length;  // 返回2，表情符号通常占用两个代码单元

字符串类似数组的特性

字符串可以像数组一样使用方括号访问单个字符，但它们是不可变的：

const str = 'hello';
console.log(str[0]);  // "h"
str[0] = 'H';         // 静默失败，字符串不可变
console.log(str);     // 仍为"hello"

Base64 编码解码

Base64 是一种将二进制数据编码为 ASCII 字符的方法，常用于数据传输和存储。JavaScript 提供了原生支持：

// 基本用法
const encoded = btoa('Hello World');  // "SGVsbG8gV29ybGQ="
const decoded = atob(encoded);        // "Hello World"

// 处理非ASCII字符
function safeBtoa(str) {
  return btoa(encodeURIComponent(str));
}

function safeAtob(str) {
  return decodeURIComponent(atob(str));
}

const chineseEncoded = safeBtoa('你好'); 
const chineseDecoded = safeAtob(chineseEncoded);  // "你好"