JavaScript中如何将字符串的首字母大写

技术背景

在JavaScript开发中，经常会遇到需要将字符串的首字母大写的需求，比如格式化用户输入、处理文本显示等。然而，实现这一功能看似简单，却可能涉及到多种情况，如空字符串、特殊字符、国际化字符等。

实现步骤

基本实现

以下是几种常见的基本实现方法：

使用charAt和slice方法

1
2
3

function capitalizeFirstLetter(val) {
    return String(val).charAt(0).toUpperCase() + String(val).slice(1);
}

使用数组解构

1
2
3

function capitalizeFirstLetter([ first='', ...rest ]) {
    return [ first.toUpperCase(), ...rest ].join('');
}

ES6箭头函数

1	`const capitalize = s => s && String(s[0]).toUpperCase() + String(s).slice(1);`

处理空字符串

为了避免空字符串返回undefined，可以进行如下改进：

1
2
3

function capitalize(s) {
    return s && String(s[0]).toUpperCase() + String(s).slice(1);
}

国际化处理

考虑到不同语言的大写规则不同，可以使用toLocaleUpperCase方法：

1
2
3

function capitalizeFirstLetter([ first='', ...rest ], locale) {
    return [ first.toLocaleUpperCase(locale), ...rest ].join('');
}

处理多个单词

如果需要将字符串中每个单词的首字母大写，可以这样实现：

function ucFirstAllWords( str ) {
    var pieces = str.split(" ");
    for ( var i = 0; i < pieces.length; i++ ) {
        var j = pieces[i].charAt(0).toUpperCase();
        pieces[i] = j + pieces[i].substr(1);
    }
    return pieces.join(" ");
}

核心代码

基本首字母大写

1
2
3

function capitalizeFirstLetter(string) {
    return string[0].toUpperCase() + string.slice(1);
}

考虑空字符串和国际化

function capitalizeFirstLetter(str, locale = navigator.language) {
    if (!str) return '';
    const firstCodePoint = str.codePointAt(0);
    const index = firstCodePoint > 0xFFFF ? 2 : 1;
    return String.fromCodePoint(firstCodePoint).toLocaleUpperCase(locale) + str.slice(index);
}

多个单词首字母大写

function ucFirstAllWords( str ) {
    return str.split(" ").map(word => {
        return word.charAt(0).toUpperCase() + word.slice(1);
    }).join(" ");
}

最佳实践

优先使用CSS：如果只是为了在网页上显示首字母大写的文本，可以优先使用CSS的text-transform属性。

1
2
3

p::first-letter {
    text-transform: capitalize;
}

避免修改原型：虽然可以通过修改String.prototype来实现首字母大写，但这可能会导致维护问题和冲突，不建议这样做。
考虑性能：不同实现方法的性能可能有所差异，可以根据具体情况选择合适的方法。例如，string.substring(1)比string.slice(1)稍快。