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

javascript string letter capitalize

如何使字符串的第一个字母大写,但不更改任何其他字母的大小写?

例如:

“这是一个测试”→“这是一个测试”

“埃菲尔铁塔”→“埃菲尔铁塔”

“/index.html”→“/index.html”

Underscore 有一个名为 underscore.string 的插件,其中包括此工具和许多其他出色的工具。

更简单:string[0].toUpperCase() + string.substring(1)

`${s[0].toUpperCase()}${s.slice(1)}`

([initial, ...rest]) => [initial.toUpperCase(), ...rest].join("")

str.toLowerCase().replace(/\b(\w)/g, s => s.toUpperCase())

S
Samathingamajig

基本解决方案是:

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

此解决方案是正确的,但根据定义 The capitalize() method returns a string where the first character is upper case, and the rest is lower case.,如果任何其他字母是理想的大写字母 .toLowerCase() 也应添加到此答案的切片部分,这将失败。 function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase(); } console.log(capitalizeFirstLetter('foo'));

G
Gershom Maes

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

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

您将调用该函数,如下所示:

"hello, world!".capitalize();

预期输出为:

"Hello, world!"

@aggregate1166877 你能解释一下为什么吗?这个答案有近 1500 人支持。因此,如果没有任何解释,人们就会忽略你。像我一样,因为我会这样做。

@NielsLucas 够公平的。它有可能打破未来对 JS 的补充。如果它是只有您会使用的代码,那么它还不错 - 您只需更新您的代码并继续前进。这里真正的问题是当您开始使用这样的代码发布库时:您的代码使用您的代码修改每个库的内置行为。结果是,如果您和另一个库作者都用您自己的实现覆盖相同的内置函数,您会在另一个库的代码(或最后加载的代码)中创建错误,从而给用户留下无法重现的错误报告的调试地狱。

@aggregate1166877 感谢您的解释。我完全同意你的观点,这种方式不是创建库的好习惯,我也同意这种方式对项目来说很好。希望人们会读到这篇文章,因为我认为这是对原始答案的一个很好的关注。

抱歉,不,只是不要向基本类型添加任何功能。扩展它们? const ExtendedString = class extends String { capitalize () { return this[0].toUpperCase() + this.slice(1) } } const s = new ExtendedString('hello') console.log(s.capitalize())

很高兴看到作者在帖子中包含一些免责声明和有关扩展内置类型的详细信息。人们很难注意到评论。

J
Jasper

在 CSS 中:

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

$('#mystring_id').text(string).css('text-transform','capitalize');

此外,这只影响字符串的显示 - 而不是实际值。例如,如果它在一个表单中,该值仍将按原样提交。

这不是 JS,但我敢打赌,对于 99% 的读者来说,这是最好的答案。我当然很高兴我滚动了这么远🙃

此外,::first-letter 仅适用于 display 值为 blockinline-blocktable-celllist-itemtable-caption 的元素。在所有其他情况下,::first-letter 无效。

A
Aakash

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

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)) || ""

只需使用 charAt() 而不是 []

C
Community

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

以下是基于 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

我想知道为什么最后一种方法这么慢,你每次迭代都将函数附加到原型上吗?那是不公平的

S
Semicolon

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

最初我没有看到任何解决与星体平面代码点相关的问题的答案。有 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));
}

这可以稍微调整一下,以处理字符串中多个单词的大写,并具有相当好的准确性。 CWUChanges_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,这可能是预期的,也可能不是预期的。

我一直想知道为什么 toUpperCase 对某些语言并没有真正做太多......但并没有足够在意去找出答案。很高兴我终于做到了,这是一本非常有趣的书!

这似乎不适用于荷兰语中的“IJ”等二合字母。使用最新版本,此处的示例被错误地大写为“Ijsselmeer”(正则表达式版本)。我使用的代码是:capitalizeFirstLetter('ijssel', 'nl-NL') - 这是一个正确的本地化字符串,对吧?

“ij”为 U+69,U+6A 将大写为“Ij”,是的 - “ij”(U+133,单个代码点)大写为“IJ”(U+132)。此处的区域设置意识仅扩展到 Unicode 定义的大小写映射规则,这些规则有时因语言而异,如土耳其语;知道 "ij" (U+69, U+6A) 是否应该解释为 ij (U+133) 超出了它的范围,并且至少需要该语言的字典。

@paul23 您写的是 ij(2 个字母)而不是 ij(1 个字母)。

在荷兰,荷兰语 IJ 被认为是 2 个字母,它们只是同时大写(与比利时版本相反)。

a
alejandro

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

//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();
P
Peter Mortensen

这是 2018 ECMAScript 6+ 解决方案:

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

P
Peter Mortensen

如果您已经(或正在考虑)使用 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);
}

我认为应该首选 vanilla Js,因为大多数人不会下载整个框架只是为了大写一个字符串。

到目前为止,在我的所有项目中,我从未使用过 lodash。不要忘记,谷歌上的大多数人都会在这个页面上结束,列出一个框架作为替代方案很好,但不是主要答案。

@GGG 到目前为止,我在所有项目中都使用过 lodash

Vanilla js 比 lodash 更好。没有人再使用它了。

@chovy 我在 npm 上查找了它,它在过去一周内有约 40,276,984 次下载,并且依赖于约 144k 包。我不会说没有人使用它。

G
GAMITG

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

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

重读问题:我想将字符串的第一个字符大写,但不更改任何其他字母的大小写。

我知道我做到了。我会添加一件事,以防整个字符串开始大写:pieces[i] = j + pieces[i].substr(1).toLowerCase();

这种情况的另一种解决方案: function capitaliseFirstLetters(s) { return s.split(" ").map(function(w) { return w.charAt(0).toUpperCase() + w.substr(1) }).join (" ") } 如果它没有放入函数中,它可以是一个很好的单行。

最好先小写整个字符串

除了这个函数没有回答问题之外,它实际上也过于复杂了。 s => s.split(' ').map(x => x[0].toUpperCase() + x.slice(1)).join(' ')

P
Peter Mortensen

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

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

结果:

'Foo'

迄今为止的最佳答案,以及显示正则表达式 lambda 语法的额外要点。我特别喜欢这个,因为它可以在任何地方进行流畅的剪切和粘贴。

使用 /^[a-z]/i 会比使用 . 更好,因为前一个不会尝试替换字母以外的任何字符

确实很聪明!

@CodeManiac 除了 [az] 之外,还有很多语言和字母

P
Przemek

仅 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

您实际上不想在 ES6 中使用加号 (+) 作为连接方法。您需要使用模板文字:eslint.org/docs/rules/prefer-template

A
Alireza

使用 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'
P
Peter Mortensen
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

我认为这是一个糟糕的解决方案,原因有两个: 修改原语的原型是一个坏主意。如果规范发生变化并且他们决定选择“大写”作为新的原型属性名称,那么您将破坏核心语言功能。此外,选择的方法名称很差。乍一看,我认为这会将整个字符串大写。使用更具描述性的名称,例如 PHP 的 ucFirst 或类似名称可能是一个更好的主意。

另一个 ES6 答案更简单:const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();

@dudewad 在 css 中,单词首字母的大写称为“大写”,如果您想将所有字符大写,请使用“大写”,因此这不是一个非常糟糕的选择。

y
yckart

我们可以得到我最喜欢的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();
  });
};

有一种更好的方法可以在不修改 String 原型的情况下执行此操作。

@davidkennedy85 当然!但这是简单的方法,而不是最好的方法...... ;-)

亲爱的上帝,这个问题有一百万个答案!您的解决方案在 es6 中看起来更好。 'Answer'.replace(/^./, v => v.toLowerCase())

你说的“咖啡”指的是什么? “CoffeeScript”?

K
Kamil Kiełczewski

SHORTEST 3 个解决方案,1 和 2 处理 s 字符串为 ""nullundefined 的情况:

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

S
SK-the-Learner

这是一个名为 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 中,当你取一个空字符串的子字符串时,你只会得到一个空字符串。

@999:它在哪里说 substr() 已弃用? It's not,即使是三年后的现在,更不用说 2009 年您发表此评论的时候了。

substr() 可能不会被任何流行的 ECMAScript 实现标记为已弃用(我怀疑它不会很快消失),但它不是 ECMAScript 规范的一部分。该规范的第 3 版在非规范性附件中提到了它,以“建议此类属性的统一语义,而不使属性或其语义成为本标准的一部分”。

有 3 种方法做同样的事情(substringsubstrslice)太多了,IMO。我总是使用 slice,因为它支持负索引,它没有令人困惑的 arg 交换行为,而且它的 API 类似于其他语言中的 slice

P
Peter Mortensen

利用:

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

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

一条线解决方案。

P
Peter Mortensen

如果您使用 Underscore.jsLodashunderscore.string 库会提供字符串扩展,包括大写:

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

例子:

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

从版本 3.0.0 开始,Lo-Dash 默认提供此字符串方法。就像在这个答案中描述的那样:_.capitalize("foo") === "Foo"

还有一个名为 humanize 的有用 underscore.js 函数。它将带下划线、驼峰或短划线的字符串转换为人性化字符串。还删除开头和结尾的空格,并删除后缀“_id”。

从版本 4* 开始,Lodash 每隔一个字母也使用小写(),小心!

K
Katinka Hesselink

如果您可以将每个单词的首字母大写,并且您的用例是 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)。

@Simon没有说字符串一定会作为HTML文档的一部分输出-CSS只有在使用时才会有用。

亚当,没错,但我猜超过 95% 的 Javascript 与 HTML 和 CSS 一起使用。不幸的是,“capitalize”语句实际上将每个单词都大写,所以你仍然需要 JS 将字符串的第一个字母大写。

不正确,迪内什。他说的是字符串的第一个字符。

这个答案,尽管有大量的赞成票,但它是错误的,因为它将大写 every 单词的第一个字母。 @Ryan,如果您删除它,您将获得 Disciplined badge请这样做。

现在是 javascript: $('.capitalize').css('text-transform', 'capitalize')

z
zianwar
var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);
G
GAMITG

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

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

这将确保更改以下文本:

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

可能值得注意的是,这也会将首字母缩写词之类的东西转换为小写,所以在大多数情况下可能不是最好的主意

另外,GAMITG 真的只是为了从帖子的非代码部分删除一块空白而进行了编辑吗? O_O

顺便说一句,这会破坏大写首字母缩写词,所以要小心你们 <3

F
Fredrik A.
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'

完成@Ram。还包括示例。

这比 the 2009 answer 好多少?

这不是@DanDascalescu。我想您可能会争辩说,与 slice 相比,substr/substring 更具语义性,但这只是偏好问题。但是,我确实包含了带有问题中提供的字符串的示例,这是 '09 示例中不存在的一种很好的感觉。老实说,我认为这可以归结为 15 岁的我想要在 StackOverflow 上的业力;)

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

用法:

capitalizedString = someString.capitalize();

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

+1,这就是我真正想要的。不过有一个小错误,它应该是 return.this.toLocaleLowerCase().replace( ...

+1,我发现此页面正在寻找 phps ucfirst 的 javascript 版本,我怀疑这是大多数人找到它的方式。

@DanDascalescu 我发现这很有用,所以+1 功利主义和-1 肛门保持性。他举了一个例子,所以它的功能很清楚。

String.prototype.capitalize = function(){ return this.replace( /(^|\s)[a-z]/g , function(m){ return m.toUpperCase(); }); }; 我稍微重构了您的代码,您只需要第一个匹配项。

首先,它做的不是 OP 要求的,其次,正则表达式在这种情况下是一种低效的矫枉过正,最后不要修改你不拥有的东西的原型

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

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

这应该是公认的答案,而不是自从 SO 不断奖励过时的问题以来,这几乎是最后一个。顺便说一句,最好使用 /./ 有两个原因:/\w/ 将跳过所有以前的非字母字符(因此 @@abc 将变为 @@Abc),然后它不适用于非拉丁字符

这是一个很好的答案!有一个小警告:\w Matches any alphanumeric character from the basic Latin alphabet, including the underscore. 所以替换像 _boss 这样的词将产生 _boss(来自 developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/…

M
MaxEcho
var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);
J
Jack G

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

这个问题有 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。

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

很高兴看到提出这种担忧的答案。但是,我不相信有任何浏览器会出现 String.fromCodePoint(65536).length === 1。 ES 字符串暴露其 UTF16ishness 并不是特定于实现的行为——它是规范中定义明确的部分,并且由于向后兼容而无法修复。

回复:新的最后说明,WHATWG 和 co 已将 UTF-8 作为平台上所有文本交换的唯一“正确”编码。这不会改变(这是一件好事)。不过,ES 问题与此不同——它是关于 ES 具有字符串抽象,其中内部“utf-16 + 单独代理”编码的代码单元(它既不是 UTF-16 也不是 UCS2)在使用索引时“突破”地址、String.prototype.length 等 (1/2)

负责 ES 的机构是 TC39 而不是 W3C(或 WHATWG 等),他们无法更改现有功能,因为这会破坏网络。相反,他们可以引入行为正确的新功能。他们已经开始这样做了——RegExp、String.prototype.codePointAt 和 String.prototype[@@iterator] 上的 'u' 标志为旧 API 提供了更安全的替代方案。 (2/2)

哇——快 5 年了,还有很多编辑。它看起来真的很有用,但这段代码显然从未运行过。 S 还是 string

@dsl101 已修复。谢谢你指出这一点。

P
Peter Mortensen

看看这个解决方案:

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

节省一些击键;)stringVal.replace(/^./, stringVal[0].toUpperCase());

非必要时不应使用正则表达式。它的效率非常低,也不会使代码更加简洁。此外,对于空的 stringValstringVal[0] 将是 undefined,因此尝试访问属性 .toUpperCase() 会引发错误。

P
Peter Mortensen

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

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

带箭头功能

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"]