如何在 JavaScript 中使字符串的第一个字母大写？

基本解决方案是：

function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } console.log(capitalizeFirstLetter('foo')); // 富

其他一些答案修改了 String.prototype（这个答案也曾经），但由于可维护性，我现在建议不要这样做（很难找出函数被添加到 prototype 的位置，并且如果其他代码使用可能会导致冲突同名/浏览器将来会添加同名的本机函数）。

...然后，当您考虑国际化时，这个问题还有很多，如 this astonishingly good answer（埋在下面）所示。

如果您想使用 Unicode 代码点而不是代码单元（例如处理基本多语言平面之外的 Unicode 字符），您可以利用 String#[@iterator] 与代码点一起使用的事实，并且您可以使用 toLocaleUpperCase 来获得语言环境正确的大写：

const capitalizeFirstLetter = ([ first, ...rest ], locale = navigator.language) => first === undefined ? '' : first.toLocaleUpperCase(locale) + rest.join('') console.log( capitalizeFirstLetter(''), // [空字符串] capitalizeFirstLetter('foo'), // Foo capitalizeFirstLetter("𐐶𐐲𐑌𐑉"), // "𐐎𐐲𐑌𐑉"（正确！） capitalizeFirstLetter("italya", 'tr') // İtalya"（土耳其拉丁语正确！）

如需更多国际化选项，请参阅original answer below。

---

这是一种更面向对象的方法：

Object.defineProperty(String.prototype, 'capitalize', {
  value: function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
  },
  enumerable: false
});

您将调用该函数，如下所示：

"hello, world!".capitalize();

预期输出为：

"Hello, world!"

---

在 CSS 中：

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

---

这是流行答案的缩短版本，它通过将字符串视为数组来获取第一个字母：

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

更新

根据下面的评论，这在 IE 7 或更低版本中不起作用。

更新 2：

为避免 undefined 出现空字符串（请参阅 @njzk2's comment below），您可以检查空字符串：

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

ES版

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

// to always return type string event when s may be falsy other than empty-string
const capitalize = s => (s && s[0].toUpperCase() + s.slice(1)) || ""

---

如果您对发布的几种不同方法的性能感兴趣：

以下是基于 this jsperf test 的最快方法（从最快到最慢排序）。

如您所见，前两种方法在性能方面基本相当，而更改 String.prototype 在性能方面是迄今为止最慢的。

// 10,889,187 operations/sec
function capitalizeFirstLetter(string) {
    return string[0].toUpperCase() + string.slice(1);
}

// 10,875,535 operations/sec
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

// 4,632,536 operations/sec
function capitalizeFirstLetter(string) {
    return string.replace(/^./, string[0].toUpperCase());
}

// 1,977,828 operations/sec
String.prototype.capitalizeFirstLetter = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

https://i.stack.imgur.com/tNwKk.png

---

在与星体平面代码点或国际化相关的问题的现有答案中，我没有看到任何提及。 “大写”在使用给定脚本的每种语言中并不意味着相同的东西。

最初我没有看到任何解决与星体平面代码点相关的问题的答案。有 is one，但它有点被埋没了（我猜这一个会是这样！）

大多数建议的功能如下所示：

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

但是，一些大小写字符不在 BMP（基本多语言平面，代码点 U+0 到 U+FFFF）之外。例如，以这个 Deseret 文本为例：

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉"); // "𐐶𐐲𐑌𐐼𐐲𐑉"

这里的第一个字符没有大写，因为字符串的数组索引属性不访问“字符”或代码点*。他们访问 UTF-16 代码单元。切片时也是如此——索引值指向代码单元。

碰巧 UTF-16 代码单元是 1:1，USV 代码点在两个范围内，U+0 到 U+D7FF 和 U+E000 到 U+FFFF 包括在内。大多数大小写字符都属于这两个范围，但不是全部。

从 ES2015 开始，处理这个变得更容易了。 String.prototype[@@iterator] 产生对应于代码点的字符串**。例如，我们可以这样做：

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

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

对于较长的字符串，这可能不是非常有效***——我们真的不需要迭代其余部分。我们可以使用 String.prototype.codePointAt 来获取第一个（可能的）字母，但我们仍然需要确定切片应该从哪里开始。避免迭代剩余部分的一种方法是测试第一个代码点是否在 BMP 之外；如果不是，则切片从 1 开始，如果是，则切片从 2 开始。

function capitalizeFirstLetter(str) {
  const firstCP = str.codePointAt(0);
  const index = firstCP > 0xFFFF ? 2 : 1;

  return String.fromCodePoint(firstCP).toUpperCase() + str.slice(index);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

您可以在此处使用按位数学而不是 > 0xFFFF，但这种方式可能更容易理解，并且两者都可以达到相同的效果。

我们也可以在 ES5 及更低版本中实现这项工作，如果必要的话，可以通过更进一步的逻辑来实现。 ES5 中没有用于处理代码点的内在方法，因此我们必须手动测试第一个代码单元是否是代理****：

function capitalizeFirstLetter(str) {
  var firstCodeUnit = str[0];

  if (firstCodeUnit < '\uD800' || firstCodeUnit > '\uDFFF') {
    return str[0].toUpperCase() + str.slice(1);
  }

  return str.slice(0, 2).toUpperCase() + str.slice(2);
}

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

一开始我也提到了国际化的考虑。其中一些很难解释，因为它们不仅需要了解正在使用的语言，而且可能需要了解该语言中的单词的具体知识。例如，爱尔兰二合字母“mb”在单词开头大写为“mB”。另一个例子，德语 eszett，从不开始一个词 (afaik)，但仍然有助于说明问题。小写的 eszett (“ß”) 大写为“SS”，但“SS”可以小写为“ß”或“ss”——您需要德语的带外知识才能知道哪个是正确的！

这类问题最著名的例子可能是土耳其语。在土耳其拉丁语中，i 的大写形式是 İ，而 I 的小写形式是 ı——它们是两个不同的字母。幸运的是，我们确实有办法解决这个问题：

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

capitalizeFirstLetter("italy", "en") // "Italy"
capitalizeFirstLetter("italya", "tr") // "İtalya"

在浏览器中，用户最喜欢的语言标签由 navigator.language 表示，在 navigator.languages 处可以找到按优先顺序排列的列表，并且（通常）可以在多语言文档中使用 Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HERE 获得给定 DOM 元素的语言.

在支持 ES2018 中引入的 RegExp 中的 Unicode 属性字符类的代理中，我们可以通过直接表达我们感兴趣的字符来进一步清理内容：

function capitalizeFirstLetter(str, locale=navigator.language) {
  return str.replace(/^\p{CWU}/u, char => char.toLocaleUpperCase(locale));
}

这可以稍微调整一下，以处理字符串中多个单词的大写，并具有相当好的准确性。 CWU 或 Changes_When_Uppercased 字符属性匹配所有代码点，这些代码点在大写时会发生变化。我们可以用像荷兰语 ij 这样的带标题的二合字母来试试这个，例如：

capitalizeFirstLetter('ijsselmeer'); // "IJsselmeer"

截至 2021 年 1 月，所有主要引擎都实现了 Unicode 属性字符类功能，但根据您的目标支持范围，您可能还无法安全使用它。最后一个引入支持的浏览器是 Firefox（78；2020 年 6 月 30 日）。您可以使用 Kangax compat table 检查是否支持此功能。 Babel 可用于编译带有属性引用的 RegExp 文字到没有它们的等效模式，但请注意，生成的代码有时可能会很大。除非您确定权衡对于您的用例是合理的，否则您可能不想这样做。

问这个问题的人很可能不会关心 Deseret 的大写或国际化。但是，了解这些问题是件好事，因为即使它们目前不是问题，您最终也很有可能会遇到它们。它们不是“边缘”案例，或者更确切地说，它们不是定义的边缘案例——无论如何，在整个国家，大多数人都说土耳其语，并且将代码单元与代码点混为一谈是相当常见的错误来源（尤其是与关于表情符号）。字符串和语言都非常复杂！

* UTF-16 / UCS2 的代码单元在某种意义上也是 Unicode 代码点，例如 U+D800 在技术上是一个代码点，但这不是它在这里的“含义”......有点......虽然它变得很漂亮模糊。但是，代理绝对不是 USV（Unicode 标量值）。

** 虽然如果代理代码单元是“孤立的”——即，不是逻辑对的一部分——你仍然可以在这里获得代理。

*** 也许。我没有测试过。除非你已经确定大写是一个有意义的瓶颈，否则我可能不会担心——选择你认为最清晰易读的任何内容。

**** 这样的函数可能希望同时测试第一个和第二个代码单元，而不仅仅是第一个，因为第一个单元可能是孤立的代理。例如，输入“\uD800x”将按原样大写 X，这可能是预期的，也可能不是预期的。

---

对于另一种情况，我需要将第一个字母大写，其余字母小写。以下情况使我更改了此功能：

//es5
function capitalize(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
capitalize("alfredo")  // => "Alfredo"
capitalize("Alejandro")// => "Alejandro
capitalize("ALBERTO")  // => "Alberto"
capitalize("ArMaNdO")  // => "Armando"

// es6 using destructuring 
const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();

---

这是 2018 ECMAScript 6+ 解决方案：

const str = '埃菲尔铁塔'; const newStr = `${str[0].toUpperCase()}${str.slice(1)}`; console.log('原始字符串：', str); // 埃菲尔铁塔 console.log('New String:', newStr); // 艾菲尔铁塔

---

如果您已经（或正在考虑）使用 Lodash，解决方案很简单：

_.upperFirst('fred');
// => 'Fred'

_.upperFirst('FRED');
// => 'FRED'

_.capitalize('fred') //=> 'Fred'

查看他们的文档：https://lodash.com/docs#capitalize

_.camelCase('Foo Bar'); //=> 'fooBar'

https://lodash.com/docs/4.15.0#camelCase

_.lowerFirst('Fred');
// => 'fred'

_.lowerFirst('FRED');
// => 'fRED'

_.snakeCase('Foo Bar');
// => 'foo_bar'

第一个大写的 Vanilla JavaScript：

function upperCaseFirst(str){
    return str.charAt(0).toUpperCase() + str.substring(1);
}

---

将字符串中所有单词的首字母大写：

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(" ");
}

---

有一种非常简单的方法可以通过替换来实现。对于 ECMAScript 6：

'foo'.replace(/^./, str => str.toUpperCase())

结果：

'Foo'

---

仅 CSS

如果仅在网页上显示时需要转换：

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

尽管被称为 "::first-letter"，但它适用于第一个字符，即在字符串 %a 的情况下，此选择器将适用于 %，因此 a 不会大写。

在 IE9+ 或 IE5.5+ 中，它在传统表示法中受支持，只有一个冒号 (:first-letter)。

ES2015 单行

const capitalizeFirstChar = str => str.charAt(0).toUpperCase() + str.substring(1);

评论

在我执行的基准测试中，string.charAt(0) 和 string[0] 之间没有显着差异。但是请注意，对于空字符串，该 string[0] 将是未定义的，因此必须重写该函数以使用“string && string[0]”，与替代方法相比，这太冗长了。

string.substring(1) 比 string.slice(1) 快。

substring() 和 slice() 之间的基准测试

现在的差异相当小（run the test yourself）：

substring() 为 21,580,613.15 ops/s ±1.6%，

slice() 为 21,096,394.34 ops/s ±1.8%（慢 2.24%）。

https://i.stack.imgur.com/CQkj0.png

---

使用 CSS 先 处理这类事情总是更好，一般来说，如果您可以使用 CSS 解决问题，请先尝试，然后尝试 JavaScript 来解决您的问题，所以在这种情况下尝试使用:first-letter 在 CSS 中并应用 text-transform:capitalize;

因此，请尝试为此创建一个类，以便您可以全局使用它，例如：.first-letter-uppercase 并在您的 CSS 中添加如下内容：

.first-letter-uppercase:first-letter {
    text-transform:capitalize;
}

另一个选项是 JavaScript，所以最好的选择是这样的：

function capitalizeTxt(txt) {
  return txt.charAt(0).toUpperCase() + txt.slice(1); //or if you want lowercase the rest txt.slice(1).toLowerCase();
}

并称之为：

capitalizeTxt('this is a test'); // return 'This is a test'
capitalizeTxt('the Eiffel Tower'); // return 'The Eiffel Tower'
capitalizeTxt('/index.html');  // return '/index.html'
capitalizeTxt('alireza');  // return 'Alireza'
capitalizeTxt('dezfoolian');  // return 'Dezfoolian'

如果您想一遍又一遍地重用它，最好将它附加到javascript原生字符串，如下所示：

String.prototype.capitalizeTxt = String.prototype.capitalizeTxt || function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

并将其称为如下：

'this is a test'.capitalizeTxt(); // return 'This is a test'
'the Eiffel Tower'.capitalizeTxt(); // return 'The Eiffel Tower'
'/index.html'.capitalizeTxt();  // return '/index.html'
'alireza'.capitalizeTxt();  // return 'Alireza'

---

String.prototype.capitalize = function(allWords) {
   return (allWords) ? // If all words
      this.split(' ').map(word => word.capitalize()).join(' ') : // Break down the phrase to words and then recursive
                                                                 // calls until capitalizing all words
      this.charAt(0).toUpperCase() + this.slice(1); // If allWords is undefined, capitalize only the first word,
                                                    // meaning the first character of the whole string
}

接着：

 "capitalize just the first word".capitalize(); ==> "Capitalize just the first word"
 "capitalize all words".capitalize(true); ==> "Capitalize All Words"

更新 2016 年 11 月 (ES6)，只是为了好玩：

const capitalize = (string = '') => [...string].map(    // Convert to array with each item is a char of
                                                        // string by using spread operator (...)
    (char, index) => index ? char : char.toUpperCase()  // Index true means not equal 0, so (!index) is
                                                        // the first character which is capitalized by
                                                        // the `toUpperCase()` method
 ).join('')                                             // Return back to string

然后capitalize("hello") // Hello

---

我们可以得到我最喜欢的RegExp的第一个角色，看起来像一个可爱的笑脸：/^./

String.prototype.capitalize = function () {
  return this.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

对于所有的咖啡迷：

String::capitalize = ->
  @replace /^./, (match) ->
    match.toUpperCase()

...对于所有认为有更好的方法而不扩展原生原型的人：

var capitalize = function (input) {
  return input.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

---

SHORTEST 3 个解决方案，1 和 2 处理 s 字符串为 ""、null 和 undefined 的情况：

 s&&s[0].toUpperCase()+s.slice(1)        // 32 char

 s&&s.replace(/./,s[0].toUpperCase())    // 36 char - using regexp

'foo'.replace(/./,x=>x.toUpperCase())    // 31 char - direct on string, ES6

让 s='foo bar'; console.log(s&&s[0].toUpperCase()+s.slice(1)); console.log(s&&s.replace(/./,s[0].toUpperCase())); console.log('foo bar'.replace(/./,x=>x.toUpperCase()));

---

这是一个名为 ucfirst()（“大写首字母”的缩写）的函数：

function ucfirst(str) {
    var firstLetter = str.substr(0, 1);
    return firstLetter.toUpperCase() + str.substr(1);
}

您可以通过调用 ucfirst("some string") 将字符串大写——例如，

ucfirst("this is a test") --> "This is a test"

它通过将字符串分成两部分来工作。在第一行，它取出 firstLetter，然后在第二行，它通过调用 firstLetter.toUpperCase() 将 firstLetter 大写，并将它与通过调用 str.substr(1) 找到的字符串的其余部分连接起来。

您可能认为这对于空字符串会失败，实际上在像 C 这样的语言中，您必须满足这一点。然而在 JavaScript 中，当你取一个空字符串的子字符串时，你只会得到一个空字符串。

---

利用：

var str = "ruby java"; console.log(str.charAt(0).toUpperCase() + str.substring(1));

它会将 "Ruby java" 输出到控制台。

---

如果您使用 Underscore.js 或 Lodash，underscore.string 库会提供字符串扩展，包括大写：

_.capitalize(string) 将字符串的第一个字母转换为大写。

例子：

_.capitalize("foo bar") == "Foo bar"

---

如果您可以将每个单词的首字母大写，并且您的用例是 HTML，则可以使用以下 CSS：

<style type="text/css">
    p.capitalize {text-transform:capitalize;}
</style>
<p class="capitalize">This is some text.</p>

这是来自 CSS text-transform Property（在 W3Schools）。

---

var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);

---

如果您想重新格式化全大写文本，您可能需要修改其他示例：

function capitalize (text) {
    return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
}

这将确保更改以下文本：

TEST => Test
This Is A TeST => This is a test

---

function capitalize(s) {
    // returns the first letter capitalized + the string from index 1 and out aka. the rest of the string
    return s[0].toUpperCase() + s.substr(1);
}


// examples
capitalize('this is a test');
=> 'This is a test'

capitalize('the Eiffel Tower');
=> 'The Eiffel Tower'

capitalize('/index.html');
=> '/index.html'

---

String.prototype.capitalize = function(){
    return this.replace(/(^|\s)([a-z])/g, 
                        function(m, p1, p2) {
                            return p1 + p2.toUpperCase();
                        });
};

用法：

capitalizedString = someString.capitalize();

这是一个文本字符串 => 这是一个文本字符串

---

yourString.replace(/\w/, c => c.toUpperCase())

我发现这个箭头功能最简单。 Replace 匹配字符串的第一个字母字符 (\w) 并将其转换为大写。没有什么更花哨的了。

---

var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);

---

𝗔𝗦𝗼𝗹𝘂𝘁𝗶𝗼𝗻𝗪𝗼𝗿𝗸𝘀𝗙𝗼𝗿𝗔𝗹𝗹𝗖𝗵𝗮𝗿𝗮𝗰𝘁𝗲𝗿𝘀𝗖𝗵𝗮𝗿𝗮𝗰𝘁𝗲𝗿𝘀

这个问题有 57 81 个不同的答案，有些离题，但没有一个提出重要问题，即列出的解决方案都不适用于亚洲字符、表情符号和许多浏览器中的其他高 Unicode 点值字符。这是一个解决方案，它将：

const consistantCapitalizeFirstLetter = "\uD852\uDF62".length === 1 ?
    function(S) {
        "use-strict"; // Hooray! The browser uses UTF-32!
        return S.charAt(0).toUpperCase() + S.substring(1);
    } : function(S) {
        "use-strict";
        // The browser is using UCS16 to store UTF-16
        var code = S.charCodeAt(0)|0;
        return (
          code >= 0xD800 && code <= 0xDBFF ? // Detect surrogate pair
            S.slice(0,2).toUpperCase() + S.substring(2) :
            S.charAt(0).toUpperCase() + S.substring(1)
        );
    };
const prettyCapitalizeFirstLetter = "\uD852\uDF62".length === 1 ?
    function(S) {
        "use-strict"; // Hooray! The browser uses UTF-32!
        return S.charAt(0).toLocaleUpperCase() + S.substring(1);
    } : function(S) {
        "use-strict";
        // The browser is using UCS16 to store UTF-16
        var code = S.charCodeAt(0)|0;
        return (
          code >= 0xD800 && code <= 0xDBFF ? // Detect surrogate pair
            S.slice(0,2).toLocaleUpperCase() + S.substring(2) :
            S.charAt(0).toLocaleUpperCase() + S.substring(1)
        );
    };

请注意，上述解决方案尝试考虑 UTF-32。但是，该规范正式声明，浏览器必须执行映射到 UCS2 的 UTF-16 中的所有操作。尽管如此，如果我们齐心协力，尽自己的一份力量，开始为 UTF32 做准备，那么 TC39 就有可能允许浏览器开始使用 UTF-32（就像 Python 如何为字符串的每个字符使用 24 位一样） .对于说英语的人来说，这一定很愚蠢：没有人只使用 latin-1 必须处理 Mojibake，因为所有字符编码都支持 Latin-I。但是，其他国家（如中国、日本、印度尼西亚等）的用户就没那么幸运了。他们一直在为编码问题而苦苦挣扎，不仅来自网页，还来自 JavaScript：许多中文/日文字符被 JavaScript 视为两个字母，因此可能会在中间分开，从而导致 � 和 �（两个问号这对最终用户没有意义）。如果我们可以开始为 UTF-32 做好准备，那么 TC39 可能只会允许浏览器做 Python 多年前所做的那样，这使得 Python 在处理高 Unicode 字符方面非常流行：使用 UTF-32。

consistantCapitalizeFirstLetter 在 Internet Explorer 3+ 中正常工作（当 const 更改为 var 时）。 prettyCapitalizeFirstLetter 需要 Internet Explorer 5.5+（请参阅 this document 第 250 页的顶部）。然而，这些事实更多地只是玩笑，因为很可能您网页上的其余代码甚至无法在 Internet Explorer 8 中运行 - 因为所有 DOM 和 JScript 错误以及这些旧浏览器中缺乏功能。此外，没有人再使用 Internet Explorer 3 或 Internet Explorer 5.5。

---

看看这个解决方案：

var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // Returns Master

---

只是因为这真的是一个单行，所以我将包括这个答案。它是一个基于 ES6 的内插字符串单行。

let setStringName = 'the Eiffel Tower';
setStringName = `${setStringName[0].toUpperCase()}${setStringName.substring(1)}`;

---

带箭头功能

let fLCapital = s => s.replace(/./, c => c.toUpperCase())
fLCapital('this is a test') // "This is a test"

带箭头功能，另一种解决方案

let fLCapital = s => s = s.charAt(0).toUpperCase() + s.slice(1);
fLCapital('this is a test') // "This is a test"

带数组和 map()

let namesCapital = names => names.map(name => name.replace(/./, c => c.toUpperCase()))
namesCapital(['james', 'robert', 'mary']) // ["James", "Robert", "Mary"]

---