前端开发必备:全方位字符串处理工具详解

本文链接：https://blog.youkuaiyun.com/weixin_45091393/article/details/145629204

前端开发必备：StringUtils 全方位字符串处理工具详解

引言

在前端开发的日常工作中，字符串的处理无处不在。从用户输入的校验、界面文本的展示优化，到数据的格式化与传输，高效且精准地操作字符串是提升应用质量与用户体验的关键环节。今天，我们将深入剖析一款功能强大、涵盖广泛的字符串工具类——StringUtils，它如同一位万能的工匠，为开发者提供了一站式解决各类字符串问题的便捷方案。

工具类概述

StringUtils 是精心封装的前端工具类，位于 @/utils/StringUtils 路径下，它整合了众多实用的字符串处理方法，旨在帮助开发者轻松应对诸如判空、格式转换、敏感信息处理、校验以及相似度比较等复杂任务，极大地提高开发效率，减少代码冗余，确保字符串操作的准确性与健壮性。

核心方法详解

1. 字符串相等判断 - `equals`

equals(value1: any, value2: any): boolean {
    if (value1 === value2) {
        return true;
    }
    if (value1 == null || value2 == null) {
        return false;
    }
    if (typeof value1!== typeof value2) {
        return false;
    }
    return String(value1) === String(value2);
}

此方法用于精确判断两个值在字符串层面是否相等。相较于简单的 === 比较，它考虑了更多情况：当值直接相等时返回 true；若其中一个值为 null，则必然不相等返回 false；若两者类型不同，也判定为不相等；最后，将值统一转换为字符串再进行比较，确保在不同数据类型（如数字、对象等可能隐式转换为字符串的情况）下，都能准确判断相等性。

2. 字符串判空系列 - `isEmpty` 与 `isNotEmpty`

isEmpty(str: string | null | undefined): boolean {
    return!str || str.trim().length === 0;
}

isNotEmpty(str: string | null | undefined): boolean {
    return!this.isEmpty(str);
}

isEmpty 方法提供了一种全面的字符串判空机制。它不仅判断空字符串 "" 为空，还将 null、undefined 以及仅包含空格的字符串视为空，通过 trim 去除首尾空格后检查长度是否为 0 来确定，为前端表单验证、数据初始化等场景中判断字符串有效性提供了便利。
isNotEmpty 则是 isEmpty 的互补方法，简单地对 isEmpty 的结果取反，用于快速判断字符串是否非空，增强代码可读性。

3. 字符串截断 - `truncate`

truncate(str: string, maxLength: number, suffix: string = "..."): string {
    if (!str) return "";
    if (str.length <= maxLength) return str;
    return str.substring(0, maxLength) + suffix;
}

当需要在界面上展示长文本的缩略形式时，truncate 方法就派上用场了。它接收原始字符串 str、最大长度 maxLength 以及可选的截断后缀 suffix（默认为 “…”）。如果字符串本身为空则返回空字符串，若长度小于等于最大长度则直接返回原字符串，否则按指定长度截断并添加后缀，确保展示文本简洁且表意清晰，常用于新闻标题、产品描述等场景。

4. 命名格式转换系列

toCamelCase(str: string): string {
    return str
       .replace(/[-_\s]+(.)?/g, (_, c) => (c? c.toUpperCase() : ""))
       .replace(/^(.)/, c => c.toLowerCase());
}

toPascalCase(str: string): string {
    return str
       .replace(/[-_\s]+(.)?/g, (_, c) => (c? c.toUpperCase() : ""))
       .replace(/^(.)/, c => c.toUpperCase());
}

toSnakeCase(str: string): string {
    return str
       .replace(/([A-Z])/g, "_$1")
       .toLowerCase()
       .replace(/^_/, "")
       .replace(/[-\s]/g, "_");
}

toKebabCase(str: string): string {
    return str
       .replace(/([A-Z])/g, "-$1")
       .toLowerCase()
       .replace(/^-/, "")
       .replace(/[_\s]/g, "-");
}

这组方法专注于字符串命名格式的转换，满足不同编程风格与场景需求。
- toCamelCase：将带有连字符、下划线或空格分隔的字符串转换为驼峰命名法，如 “user_name” 变为 “userName”，它先通过正则匹配将分隔符后的字符大写，再将首字符小写。
- toPascalCase：类似 toCamelCase，但首字符也大写，用于生成类名等场景，如 “USER-NAME” 变为 “UserName”。
- toSnakeCase：把驼峰或其他格式字符串转换为下划线命名法，如 “userName” 变为 “user_name”，通过将大写字母前插入下划线并小写处理。
- toKebabCase：与 toSnakeCase 类似，只是使用短横线分隔，如 “user_name” 变为 “user-name”，用于 HTML 元素的 class、id 等属性命名转换。

5. 字符串修饰系列

capitalize(str: string): string {
    if (!str) return str;
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}

stripHtml(html: string): string {
    return html.replace(/<[^>]*>/g, "");
}

formatMoney(
    amount: number,
    decimals: number = 2,
    symbol: string = ""
): string {
    const num = amount.toFixed(decimals);
    const parts = num.split(".");
    const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return `${symbol}${integerPart}${parts[1]? "." + parts[1] : ""}`;
}

这些方法用于对字符串进行特定的修饰。
- capitalize：将字符串首字母大写，其余小写，常用于规范文本显示，如将 “hello” 变为 “Hello”。
- stripHtml：用于去除字符串中的 HTML 标签，在处理用户输入或展示纯文本内容时，确保不包含潜在的恶意 HTML 代码，如将 “
  这是一段HTML文本
  ” 变为 “这是一段HTML文本”。
- formatMoney：针对金额数据进行格式化，默认保留两位小数，可添加货币符号，将数字转换为符合财务展示规范的字符串，如将 1234.5678 变为 “1,234.57”，方便在界面上展示金额数据。

6. 随机字符串生成与掩码处理

random(
    length: number,
    chars: string = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
): string {
    let result = "";
    for (let i = 0; i < length; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return result;
}

mask(
    str: string,
    prefixLength: number = 3,
    suffixLength: number = 4,
    maskChar: string = "*"
): string {
    if (!str) return str;
    const maskLength = str.length - prefixLength - suffixLength;
    if (maskLength <= 0) return str;
    return (
        str.substring(0, prefixNameLength) +
        maskChar.repeat(maskLength) +
        str.substring(str.length - suffixLength)
    );
}

random 方法能够生成指定长度的随机字符串，开发者可自定义字符集，常用于生成验证码、临时密码等场景，如生成一个 6 位随机字符串 “a1b2c3”。
mask 方法用于对敏感信息（如手机号、邮箱）进行掩码处理，默认保留前 3 位和后 4 位，中间用指定字符（默认为 “"）替换，如将 “13812345678” 变为 "138***5678”，在界面展示时保护用户隐私。

7. 校验系列

isEmail(email: string): boolean {
    const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return pattern.test(email);
}

isMobile(mobile: string): boolean {
    return /^1[3-9]\d{9}$/.test(mobile);
}

isIdCard(idCard: string): boolean {
    return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(idCard);
}

这组方法专注于常见信息格式的校验，为前端表单验证提供了有力支持。
- isEmail：依据正则表达式校验字符串是否为合法的电子邮件地址，如判断 “test@example.com” 为合法，“invalid-email” 为非法。
- isMobile：针对中国大陆手机号码格式进行校验，确保输入符合 1 开头，第二位为 3 - 9，后接 9 位数字的规则，如 “13812345678” 合法，“12345” 非法。
- isIdCard：用于校验中国大陆身份证号码，涵盖 15 位、18 位（含末位校验位可为 X 或 x）格式，如 “440123199001011234” 合法，“12345” 非法。

8. 字符串相似度比较 - `similarity`

similarity(str1: string, str2: string): number {
    const len1 = str1.length;
    const len2 = str2.length;
    const matrix: number[][] = [];

    // 初始化矩阵
    for (int i = 0; i <= len1; i++) {
        matrix[i] = [i];
    }
    for (int j = 0; j <= len2; j++) {
        matrix[0][j] = j;
    }

    // 计算莱文斯坦距离
    for (int i = 1; i <= len1; i++) {
        for (int j = 1; j <= len2; j++) {
            const cost = str1[i - 1] === str2[j - 1]? 0 : 1;
            matrix[i][j] = Math.min(
                matrix[i - 1][j] + 1,
                matrix[i][j - 1] + 1,
                matrix[i - 1][j - 1] + cost
            );
        }
    }

    // 计算相似度
    const distance = matrix[len1][len2];
    const maxLength = Math.max(len1, len2);
    return (maxLength - distance) / maxLength;
}

利用莱文斯坦距离算法实现字符串相似度比较，常用于模糊搜索、智能提示等场景。它通过构建二维矩阵计算两个字符串的编辑距离，即最少需要多少次插入、删除、替换操作能使两字符串相同，进而得出相似度。如 “hello” 与 “hallo” 的相似度为 0.8，“test” 与 “text” 的相似度为 0.75，为开发者提供了一种量化字符串相似程度的方法。

使用示例

import { StringUtils } from '@/utils/StringUtils';

// 字符串判空
console.log(StringUtils.isEmpty('')); // true
console.log(StringUtils.isNotEmpty('text')); // true

// 字符串处理
console.log(StringUtils.truncate('这是一个很长的文本', 5)); // "这是一个..."
console.log(StringUtils.mask('13812345678')); // "138****5678"

// 命名格式转换
console.log(StringUtils.toCamelCase('user_name')); // "userName"
console.log(StringUtils.toPascalCase('USER-NAME')); // "UserName"

// 字符串修饰
console.log(StringUtils.capitalize('hello')); // "Hello"
console.log(StringUtils.stripHtml('<p>这是一段<b>HTML</b>文本</p>')); // "这是一段HTML文本"

// 随机字符串生成与掩码处理
console.log(StringUtils.random(6)); // "a1b2c3"
console.log(StringUtils.mask('example@email.com', 3, 2, '*')); // "exa****il.com"

// 校验
console.log(StringUtils.isEmail('test@example.com')); // true
console.log(StringUtils.isMobile('13812345678')); // true

// 字符串相似度比较
console.log(StringUtils.similarity('hello', 'hallo')); // 0.8

总结

StringUtils 工具类凭借其丰富多样且实用的方法，成为前端开发中不可或缺的得力助手。无论是基础的字符串判空、格式转换，还是进阶的敏感信息处理、校验以及相似度计算，它都能提供高效、准确的解决方案。通过合理运用这些方法，开发者能够大幅提升代码质量，优化用户体验，轻松应对各种复杂的字符串处理场景，为前端项目的顺利推进保驾护航。希望本文能帮助您深入理解并熟练运用 StringUtils，让您在前端字符串的世界里游刃有余。