JavaScript 中日文半宽片假名的字符索引与渲染机制解析-js教程-PHP中文网

JavaScript 中日文半宽片假名的字符索引与渲染机制解析

本文解释为何 'ﾄｹﾞ'.indexOf('ｹ') 返回 1 且 'ﾄｹﾞ'.charAt(1) 返回 'ｹ'：字符串 'ﾄｹﾞ' 实际由三个 Unicode 字符组成（半宽ト、半宽ケ、半宽浊点），而非视觉上的两个“合成字”，因此索引操作基于真实码点而非渲染结果。

本文解释为何 `'ﾄｹﾞ'.indexof('ｹ')` 返回 1 且 `'ﾄｹﾞ'.charat(1)` 返回 `'ｹ'`：字符串 `'ﾄｹﾞ'` 实际由三个 unicode 字符组成（半宽ト、半宽ケ、半宽浊点），而非视觉上的两个“合成字”，因此索引操作基于真实码点而非渲染结果。

在 JavaScript 中，字符串是以 UTF-16 编码为基础进行处理的，indexOf() 和 charAt() 等方法操作的是逻辑字符序列中的码元（code unit）位置，而非用户感知的“视觉字形”。这在处理日文半宽片假名（Halfwidth Katakana）时尤为关键。

以 'ﾄｹﾞ' 为例，它并非一个独立的“ゲ”字符，而是由以下三个 Unicode 字符组合而成：

U+FF84：ﾄ（HALFWIDTH KATAKANA TO）
U+FF9E：ｹ（HALFWIDTH KATAKANA KE）
U+FF9F：ﾞ（HALFWIDTH KATAKANA VOICED SOUND MARK，即“半宽浊点”）

⚠️ 注意：Unicode 并未为半宽“ゲ”分配独立码位（参见 Unicode Halfwidth and Fullwidth Forms Block）。所谓“ｹﾞ”是渲染引擎将 KE + VOICED MARK 组合显示的结果——这是一种呈现层面的连字（ligature-like rendering），但底层仍为两个独立字符（实际为三个：ﾄ + ｹ + ﾞ）。

因此：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

console.log('ﾄｹﾞ'.length);        // 3 —— 字符串实际含 3 个 UTF-16 码元
console.log('ﾄｹﾞ'.charAt(0));     // 'ﾄ'
console.log('ﾄｹﾞ'.charAt(1));     // 'ｹ' ← 正确返回第二个码元
console.log('ﾄｹﾞ'.charAt(2));     // 'ﾞ'
console.log('ﾄｹﾞ'.indexOf('ｹ')); // 1 ← 因为 'ｹ' 位于索引 1 处

相比之下，全宽片假名ゲ是一个独立字符：

console.log('ゲ'.length);        // 1
console.log('ゲ'.codePointAt(0).toString(16)); // 30b2 → U+30B2 KATAKANA LETTER GE

✅ 正确处理建议：

若需按“用户感知字符”（如视觉上的“ｹﾞ”）进行匹配或切分，请使用支持 Unicode 标准化与图形簇（Grapheme Clusters）的方案，例如：

// 使用 Intl.Segmenter（现代浏览器支持）
const segmenter = new Intl.Segmenter('ja', { granularity: 'grapheme' });
const segments = Array.from(segmenter.segment('ﾄｹﾞ'), s => s.segment);
console.log(segments); // ['ﾄ', 'ｹﾞ'] —— 按视觉字形分割