字符串和正则✅

JavaScript 字符串是如何存储的？

答案

• JavaScript 字符串采用 UTF-16 编码，每个字符占用 2 字节（16 位），支持 BMP（基本多文种平面）和部分辅助平面字符。
• 字符串是不可变类型，任何修改操作都会生成新字符串，原字符串内容不会被改变。
• 内部存储为类数组结构，按索引访问字符（str[index]），但高位 Unicode 字符（如 emoji）会占用两个索引。
• 字符串长度（length）按 UTF-16 单元计数，非实际字符数，部分字符可能导致长度与视觉不一致。
• 字符串底层实现依赖 JS 引擎，通常为连续内存块，便于高效读取和拼接。

示例说明:

describe('JS 字符串存储与索引特性', () => {
  const str = 'A😊B'
  test('length 按 UTF-16 单元计数', () => {
    expect(str.length).toBe(4) // 😊 占两个单元
  })
  test('索引访问高位字符', () => {
    expect(str[1] + str[2]).toBe('😊')
  })
  test('遍历字符与实际字符数', () => {
    const chars = Array.from(str)
    expect(chars).toEqual(['A', '😊', 'B'])
    expect(chars.length).toBe(3)
  })
})

Tests

提示

在 ES5 之后统一使用 UTF-16 编码，早期使用 UCS-2 编码。引擎内部在字符串存储存在优化，会采用变长策略存储，节省内存。细节可以阅读 V8 字符串探索和优化 进一步理解

延伸阅读:

• MDN: String — JS 字符串基础与编码说明
• ECMA-262: String 类型 — 规范定义与底层原理
• Unicode 与 UTF-16 — Unicode 官方 FAQ，解释 UTF-16 编码细节
• javascript 编码 说明 js UCS-2 与 UTF-16 的区别

JavaScript 支持哪些正则能力？

答案

核心概念

• 标志位：i/g/m/s/u/y 控制匹配行为（大小写、全局、多行、dotAll、Unicode、黏连）
• 常用元字符与字符类：. \d \w \s 以及自定义 [ ]、排除 [^ ]
• 边界：^ $ \b，多行模式下行首行尾
• 分组与捕获：()、命名捕获 (?<name>pattern)、反向引用 \1 与 $<name>
• 断言：前瞻 (?=…) / (?!…)，后顾 (?<=…)/(?!<…)

flags

describe('RegExp flags 基础能力', () => {
  test('i - 忽略大小写', () => {
    expect(/abc/i.test('AbC')).toBe(true);
  });

  test('g - 全局匹配影响 lastIndex 与 exec 行为', () => {
    const re = /a/g;
    const input = 'a a';
    const m1 = re.exec(input);
    expect(m1 && m1.index).toBe(0);
    expect(re.lastIndex).toBe(1);

    const m2 = re.exec(input);
    expect(m2 && m2.index).toBe(2);
    expect(re.lastIndex).toBe(3);
  });

  test('m - 多行模式使 ^/$ 匹配行首/行尾', () => {
    const str = 'hello\nworld';
    expect(/^world$/m.test(str)).toBe(true);
  });

  test('s - dotAll 让 . 可匹配换行符', () => {
    expect(/a.b/s.test('a\nb')).toBe(true);
  });

  test('u - 正确解析 Unicode 转义与码点', () => {
    // U+1F680 ROCKET
    expect(/\u{1F680}/u.test('🚀')).toBe(true);
  });

  test('y - 黏连（sticky）从 lastIndex 位置开始匹配', () => {
    const re = /\d/y;
    const s = 'a1b2';

    re.lastIndex = 1; // 指向 '1'
    const m1 = re.exec(s);
    expect(m1 && m1[0]).toBe('1');
    expect(re.lastIndex).toBe(2);

    re.lastIndex = 2; // 指向 'b'，不是数字，无法从此处黏连匹配
    const m2 = re.exec(s);
    expect(m2).toBeNull();
  });
});

Tests

说一下 JS RegExp 与 String 的常用方法及差异

答案

核心要点

• RegExp
  • test(str): 测试字符串是否匹配正则表达式，返回布尔值。
  • exec: 执行匹配，返回匹配结果数组或 null。
• String
  • match: 返回匹配结果数组或 null。
  • matchAll: 返回所有匹配结果的迭代器。
  • replace: 替换匹配的子串，返回新字符串。支持分组回填 $1、命名捕获 $<name>
  • replaceAll: 替换所有匹配的子串，返回新字符串。
  • split: 按照匹配的子串分割字符串，返回数组。
• g 标志影响 match/matchAll 返回值与 exec 的 lastIndex

methods

describe('RegExp 与 String 常用方法差异', () => {
  test('test vs exec', () => {
    const re = /a/;
    expect(re.test('cat')).toBe(true);
    const m = re.exec('cat');
    expect(m && m[0]).toBe('a');
    expect(m && m.index).toBe(1);
  });

  test('String.match 与 全局标志', () => {
    expect('a1b2c3'.match(/\d/g)).toEqual(['1', '2', '3']);
    // 无 g 标志返回包含捕获组的第一个匹配
    const m = '2024-12-31'.match(/(\d{4})-(\d{2})-(\d{2})/);
    expect(m && m[0]).toBe('2024-12-31');
    expect(m && m[1]).toBe('2024');
  });

  test('String.matchAll 返回迭代器（需 g）', () => {
    const iter = 'a1b2c3'.matchAll(/(\d)/g);
    const arr = Array.from(iter, m => m[1]);
    expect(arr).toEqual(['1', '2', '3']);
  });

  test('replace 与 replaceAll', () => {
    expect('foo foo'.replace('foo', 'bar')).toBe('bar foo');
    expect('foo foo'.replaceAll('foo', 'bar')).toBe('bar bar');
    // 使用捕获组重排
    const s = '2024-12-31'.replace(/(\d{4})-(\d{2})-(\d{2})/, '$2/$3/$1');
    expect(s).toBe('12/31/2024');
  });

  test('split 支持正则与捕获组（保留分隔符）', () => {
    // 捕获组会出现在结果中
    const parts = 'a1b2'.split(/(\d)/);
    expect(parts).toEqual(['a', '1', 'b', '2', '']);
  });
});

Tests

分组/命名捕获/反向引用怎么用？

答案

核心要点

• 分组 () 用于提取或重复匹配子表达式，可通过下标访问捕获内容。
• 命名捕获 (?<name>pattern) 让分组更语义化，结果通过 groups.name 访问。
• 反向引用\1、\2 或 $<name> 用于匹配前面分组内容，实现去重、格式校验、替换重排等。

groups

describe('分组 / 命名捕获 / 反向引用', () => {
  test('位置分组提取', () => {
    const m = /(\d{4})-(\d{2})-(\d{2})/.exec('2024-12-31');
    expect(m && m[1]).toBe('2024');
    expect(m && m[2]).toBe('12');
    expect(m && m[3]).toBe('31');
  });

  test('命名捕获组', () => {
    const m = /(?<y>\d{4})-(?<m>\d{2})-(?<d>\d{2})/.exec('2024-12-31');
    expect(m && m.groups && m.groups.y).toBe('2024');
    expect(m && m.groups && m.groups.m).toBe('12');
    expect(m && m.groups && m.groups.d).toBe('31');
  });

  test('反向引用与去重字符', () => {
    expect(/(.)\1/.test('book')).toBe(true); // oo
    expect(/(.)\1/.test('abc')).toBe(false);
  });

  test('replace 使用命名捕获重排', () => {
    const s = 'Doe, John'.replace(/(?<last>\w+), (?<first>\w+)/, '$<first> $<last>');
    expect(s).toBe('John Doe');
  });
});

Tests

边界/多行/单词边界如何工作？

答案

核心要点

• ^/$ 在默认模式匹配整个字符串的首尾；m 模式作用于每行
• \b 用于单词边界匹配（字母数字与非字母数字之间）

boundaries

describe('边界与锚点：^ $ \\b，以及多行 m', () => {
  test('^ 和 $ 匹配整个字符串的开头与结尾', () => {
    expect(/^hello$/.test('hello')).toBe(true);
    expect(/^hello$/.test('hello\n')).toBe(false);
  });

  test('m 使 ^/$ 匹配每一行', () => {
    const s = 'foo\nbar';
    expect(/^bar$/m.test(s)).toBe(true);
  });

  test('\\b 单词边界', () => {
    expect(/\bcat\b/.test('black cat ')).toBe(true);
    expect(/\bcat\b/.test('concatenate')).toBe(false);
  });
});

Tests

前瞻/后顾断言的应用场景？

答案

核心要点

• 不消费字符的条件匹配：(?=…)/(?!…) 与 (?<=…)/(?<!…)
• 常用于前后缀定位、金额提取、复杂条件过滤

lookaround

describe('前瞻 / 后顾（lookaround）', () => {
  test('正向前瞻 (?=...) 与 负向前瞻 (?!...)', () => {
    const s = 'file.txt other';
    const m = /\w+(?=\.)/.exec(s);
    expect(m && m[0]).toBe('file');
    expect(/^\d+(?!\.)/.test('123a')).toBe(true);
    expect(/^\d+(?!\.)/.test('123.45')).toBe(false);
  });

  test('正向后顾 (?<=...) 与 负向后顾 (?<!...)', () => {
    const price = 'Pay $100 now';
    const m1 = /(?<=\$)\d+/.exec(price);
    expect(m1 && m1[0]).toBe('100');

    expect(/(?<!\$)\d+/.test('Pay 100')).toBe(true);
    expect(/(?<!\$)\d+/.test('Pay $100')).toBe(false);
  });
});

Tests

数字千分位

答案

核心要点

• 使用零宽断言模式：\B(?=(\d{3})+(?!\d)) 对整数部分分组
• 注意负号与小数部分保留

impl

function thousandSeparator (input) {
  const s = String(input)
  const negative = s.startsWith('-')
  const core = negative ? s.slice(1) : s
  const [intPart, fracPart] = core.split('.')
  const intFormatted = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  return (negative ? '-' : '') + intFormatted + (fracPart !== undefined ? '.' + fracPart : '')
}

module.exports = thousandSeparator

Tests

url 查询字段解码

答案

核心要点

• 解析 ? 之后的查询串，支持重复 key → 数组
• 对 + 视为空格，配合 decodeURIComponent 解码

impl

function decodeQuery (url) {
  const queryIndex = url.indexOf('?')
  if (queryIndex === -1) return {}
  const query = url.slice(queryIndex + 1)
  if (!query) return {}
  const result = {}
  // 支持 key=value&key2=value2，支持重复 key → 数组
  query.split('&').forEach(pair => {
    if (!pair) return
    const [k, v = ''] = pair.split('=')
    const key = decodeURIComponent(k.replace(/\+/g, '%20'))
    const value = decodeURIComponent(v.replace(/\+/g, '%20'))
    if (Object.prototype.hasOwnProperty.call(result, key)) {
      const exist = result[key]
      result[key] = Array.isArray(exist) ? [...exist, value] : [exist, value]
    } else {
      result[key] = value
    }
  })
  return result
}

module.exports = decodeQuery

Tests