前端开发中的常用工具函数(三)

🔍 一、charAt() 方法：按索引取字符

chartAt() 是 JavaScript String 对象的一个原型方法。它的作用非常直观：从一个字符串中返回指定位置的字符。

你可以把它想象成"精准定位提取器"，告诉你字符串中某个索引位置上到底坐着哪一个字符。

1. 基本语法

javascript 复制代码

str.charAt(index)

参数说明：

index（可选）：一个介于 0 和字符串长度减 1 之间的整数。
- 如果省略该参数，默认为 0。
- 如果传入浮点数，JavaScript 会自动向下取整（忽略小数部分）。
- 如果传入负数或超出字符串长度的数值，该方法不会报错，而是返回一个空字符串。

返回值：

返回指定位置的字符。
如果索引越界，返回空字符串 ""。

2. 基础示例

示例一：基础取值

javascript 复制代码

const sentence = "Hello Frontend";

console.log(sentence.charAt(0));  // 输出: "H"
console.log(sentence.charAt(6));  // 输出: "F"
console.log(sentence.charAt(sentence.length - 1)); // 输出: "d" (获取最后一个字符)

示例二：边界情况处理

这是 charAt() 与数组下标访问最大的不同点。

javascript 复制代码

const str = "Web";

// 1. 索引越界
console.log(str.charAt(10)); // 输出: "" (空字符串，代码不会报错)

// 2. 负数索引
console.log(str.charAt(-1)); // 输出: "" (空字符串)

// 3. 省略参数
console.log(str.charAt());   // 输出: "W" (默认索引为 0)

与数组下标访问 [ ] 的对比

很多开发者会疑惑：str.charAt(0) 和 str[0] 有什么区别？

这是企业开发面试中常考的一个细节：

特性	`str.charAt(index)`	`str[index]` (数组下标)
越界处理	返回空字符串 `""`	返回 `undefined`
兼容性	ES1 标准，极其古老，兼容性好	ES5+ 标准，IE6/7 支持较弱
语义	明确的方法调用	属性访问语法

推荐场景：

如果你希望代码在处理越界时更加"安全"（不希望出现 undefined 导致后续逻辑报错），优先使用 charAt()。
如果你需要快速判断某个位置是否存在字符（利用假值特性），或者代码运行环境非常古老，需注意兼容性测试。

javascript 复制代码

const title = "JS";

// 使用 charAt
console.log(title.charAt(5).toUpperCase()); // "" 没有 toUpperCase 方法，但空字符串调用不报错（虽然无意义）

// 使用下标
console.log(title[5].toUpperCase()); // 报错: Cannot read property 'toUpperCase' of undefined

3. 实际应用场景

在实际业务中，charAt() 常用于精细化的字符校验和数据处理。

场景一：隐藏敏感信息（脱敏处理）

在展示用户手机号或身份证时，通常需要隐藏中间几位。

javascript 复制代码

function maskPhone(phone) {
    // 假设 phone 为 "13812345678"
    // 获取第一位字符
    const start = phone.charAt(0);
    // 获取最后一位字符
    const end = phone.charAt(phone.length - 1);
    
    return `${start}******${end}`; // 输出: "1******8"
}

场景二：解析 URL 参数或特定格式字符串

虽然现在有 URLSearchParams，但在处理一些自定义格式（如 key:value|key:value）时，charAt 依然有用。

javascript 复制代码

// 校验字符串是否以特定符号开头
function isValidFormat(str) {
    // 校验第一个字符是否是 '@'
    if (str.charAt(0) !== '@') {
        return false;
    }
    return true;
}

复制代码

场景三：简单的加密/解密或字符位移

在前端做一些简单的本地混淆时，可以利用 charAt 配合 charCodeAt 进行位移。

javascript 复制代码

// 简单的凯撒密码：每个字符向后移1位
function simpleEncrypt(str) {
    let result = "";
    for (let i = 0; i < str.length; i++) {
        let charCode = str.charCodeAt(i);
        // 获取当前字符，转为码点 + 1，再转回字符
        // 这里展示了如何配合 charCodeAt 使用
        result += String.fromCharCode(charCode + 1);
    }
    return result;
}
// "abc" -> "bcd"

4. 注意事项

(1) 不可变性 ：字符串在 JavaScript 中是不可变的。charAt() 只是读取字符，不能用于修改字符串。

javascript 复制代码

let s = "abc";
s.charAt(0) = "b"; // 错误写法，无效，严格模式下报错

(2) Unicode 字符支持：

charAt() 返回的是 UTF-16 代码单元。这意味着对于大于 0xFFFF 的 Unicode 字符（如某些 Emoji 表情 😊 或生僻字），charAt() 可能会返回"代理对"中的一半，导致显示乱码或意外字符。

**解决方案：**如果你的项目涉及大量 Emoji 或特殊 Unicode 字符处理，建议使用 ES6 的 str.codePointAt() 配合 String.fromCodePoint()，或者使用扩展运算符 [...str] 将字符串转为数组后再通过下标访问。

javascript 复制代码

const emoji = "😊";
console.log(emoji.charAt(0)); // 输出: "�" (乱码，因为 Emoji 占两个代码单元)
    
// 现代解法
console.log([...emoji][0]); // 输出: "😊"

(3) 参数自动转换：如果传入的参数不是数字，JavaScript 会尝试转换为整数。

javascript 复制代码

console.log("abc".charAt("1")); // 输出: "b" (字符串 "1" 被转为数字 1)
console.log("abc".charAt("a")); // 输出: "a" ("a" 转为 NaN，NaN 视为 0)

虽然有这个机制，但强烈建议显式传入整数，保持代码可读性。