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


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

例如:

  • "this is a test"  - > "This is a test"
  • "the Eiffel Tower"  - > "The Eiffel Tower"
  • "/index.html"  - > "/index.html"

2969
2018-06-22 08:25


起源


下划线 有一个名为的插件 underscore.string 这包括这个和一堆其他伟大的工具。 - Aaron
关于什么: return str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();}); - Muhammad Umer
更简单: string[0].toUpperCase() + string.substring(1) - dr.dimitru
关于使一个字母大写的3页答案 - Andrew
请有人说我为什么这个问题如此受欢迎!有什么我不明白的吗? 4K投票回答这个?为什么? - Nozar Safari


答案:


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

其他一些答案会修改 String.prototype (这个答案也是如此),但由于可维护性,我现在建议不要这样做(很难找到函数添加到的位置) prototype 如果其他代码使用相同的名称/浏览器将来添加具有相同名称的本机函数,则可能导致冲突。


4736
2018-06-22 08:30



substring在更多浏览器中被理解而不是substr - mplungjan
添加到karim79 - 它可能是一种矫枉过正的功能,因为javascript将对变量做同样的事情,而不需要函数包装。我想使用一个函数会更清楚,但是它原生,否则,为什么要用函数包装器使它复杂化? - Ross
没关系...""[0].toUpperCase() 失败 - Crisfole
我们是不是也应该给LaseCase切片(1)? - hasen
不,因为OP给出了这个例子: the Eiffel Tower -> The Eiffel Tower。另外,该函数被调用 capitaliseFirstLetter不 capitaliseFirstLetterAndLowerCaseAllTheOthers。 - ban-geoengineering


更面向对象的方法:

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

接着:

"hello world".capitalize();  =>  "Hello world" 

1196
2017-07-20 15:51



我喜欢这个解决方案,因为它就像Ruby,Ruby很甜! :)我小写字符串的所有其他字母,以便它像Ruby一样工作: return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase(); - ma11hew28
在这个后Prototype.js世界中,不建议更改或扩展本机对象。 - Ryan
@rxgx - “不要延伸”的boogeyman现在开始消亡(感谢上帝),人们正在从jSand中脱颖而出,并意识到它只是一种语言功能。仅仅因为Prototype.js在短时间内扩展了Object本身,并不意味着扩展Natives是坏事。如果您为未知的消费者编写代码(如随机网站上的分析脚本),则不应该这样做,但除此之外没关系。 - csuwldcat
@csuwldcat如果您正在使用的另一个库在您不知情的情况下添加自己的大写,该怎么办?无论Prototype.js是否做到,扩展原型都是不好的形式。使用ES6,内在函数可以让你吃蛋糕也可以吃。我认为你可能会混淆“boogeyman”因为人们制造符合ECMASCRIPT规范的垫片而死亡。这些填充程序非常好,因为添加填充程序的另一个库将以相同的方式实现它。但是,应该避免添加自己的非规范内在函数。 - Justin Meyer
扩展本地人是非常糟糕的做法。即使你说“哦,我永远不会将此代码用于其他任何东西”,你(或其他人)可能会。然后他们会花三天时间试图找出一些奇怪的数学错误,因为有人扩展了Number.money()来处理与你的其他库略有不同的货币。说真的,我已经看到这种情况发生在一家大公司,并且不值得任何人调试以找出与原生原型混淆的库。 - phreakhead


在CSS中:

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

408
2017-07-17 14:06



OP正在寻求JS解决方案。 - Antonio Max
$( '#mystring_id')文本(字符串)的.css( '文本转换', '利用')。 - DonMB
此外,这仅影响字符串的显示 - 而不是实际值。如果它是一种形式,例如,该值仍将按原样提交。 - dmansfield
这是 不是问题的答案!这是JS问题的CSS解决方案。 Downvote。这是关于准确的答案,只是因为你发现“一个解决方案”并没有使它成为“正确的解决方案”,而且这是不可能的。 - dudewad
这不适用于没有DOM / CSS渲染的javascript上下文(如Node.js)。它真的回答了这样一个问题:“我如何将第一个字母呈现为Web浏览器中的大写字母,同时保持原始javascript字符串不变?” - jinglesthula


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

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

更新:

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

更新2:

避免 undefined 对于空字符串(见 @ njzk2的评论如下),你可以检查一个空字符串:

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

235
2017-08-28 23:03



这在IE <8中不起作用,因为那些浏览器不支持字符串索引。 IE8本身支持它,但仅适用于字符串文字 - 不适用于字符串对象。 - Mathias Bynens
数字IE会哭... - joelvh
谁在乎,IE7市场不到5%!那些可能是你的gremma和grempa的旧机器。我说短码FTW! - vsync
@vsync你的gremma和grempa可能会有很多钱,他们愿意花在我的网站上...... - joshuahedlund
@vsync我的意思是,根据您的用户人口统计数据,有时候(虽然我们越过2014年及以后感激越来越少),支持IE7等旧浏览器是有利可图的...... - joshuahedlund


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

以下是基于的最快方法 这个jsperf测试 (从最快到最慢排序)。

正如您所看到的,前两种方法在性能方面基本相当,而改变了 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);
}

enter image description here


135
2017-11-14 03:26



似乎初始化代码也没有区别: jsperf.com/capitalize-first-letter-of-string/2 - user420667
还有一个原因是不扩展原型。 - cchamberlain
O_o ......原型为何如此糟糕? - mvlabat
请注意,替换 .slice(1) 同 .substr(1) 将进一步提高性能。 - Przemek


对于另一个案例,我需要它来大写第一个字母和小写其余的。以下情况让我改变了这个功能:

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

129
2017-07-19 18:17



“......但不改变任何其他字母的情况”。这不是OP提出的问题的正确答案。 - Carlos Muñoz
@CarlosMuñoz如果你读了开头句,他说这是针对不同的情况。 - TMH
@TomHart这正是为什么它不是问题的解决方案。它应该是评论或其他问题和答案 - Carlos Muñoz
我同意你的意见,但我可以看到很多人在这里结束这个答案所做的事情。 - TMH


以下是最佳解决方案:

第一解决方案 在CSS中:

p {
  text-transform: capitalize;
}

二解决方案 :

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}

你也可以把它添加到 String.prototype 所以你可以用其他方法链接它:

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

并像这样使用它:

'string'.capitalizeFirstLetter() // String

第三解决方案

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).toLowerCase();
    }
    return pieces.join(" ");
}

107
2018-02-16 05:30



我发现 string.replace(string[0], string[0].toUpperCase()); 要容易多了 - Gcap
只是一个提示 - 使用CSS解决方案,在选择文本时,无法在Ubuntu(可能还有其他浏览器)的Chrome中直观地选择大写字符。如果按Ctrl + C,它仍会被选中并复制文本。 - Andris
第二个解决方案,正如您所写,使字符串的其余部分为小写。删除它将更接近原始请求。 (“艾菲尔铁塔”保留了E和T的大写字母) - Ward D.S.
1)使用两个结肠符号 ::first-letter 因为这个变体符合CSS3哲学,当涉及到那些冒号时,2)使用 .substring(…) 而不是 .slice(…) 因为它有更好的性能,3)OP不想小写所有其他字符,4)不要修改你不拥有的对象的原型 - Przemek
这个答案是你小写其他字母的 是 错误。 - fpg1503


var string = "hello world";
string = string.charAt(0).toUpperCase() + string.slice(1);
alert(string);

62
2017-07-17 06:23





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

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

58
2017-11-30 17:16



重新阅读问题:我想大写一个字符串的第一个字符, 但不改变任何其他字母的情况。 - JimmyPena
我知道我做到了。我添加了一件事,以防整个字符串开始大写:pieces [i] = j + pieces [i] .substr(1).toLowerCase(); - Malovich
这种情况的另一种解决方案:function capitaliseFirstLetters(s){return s.split(“”)。map(function(w){return w.charAt(0).toUpperCase()+ w.substr(1)})。join (“”)}如果没有放入函数,可以是一个很好的单行。 - Luke Channings
最好先将整个字符串小写 - Magico
除了这个没有回答问题的功能,它实际上也过于复杂。 s => s.split(' ').map(x => x[0].toUpperCase() + x.slice(1)).join(' ') - OverCoder


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

44
2018-02-15 06:55



有一种更好的方法可以在不修改String原型的情况下完成此操作。 - David Kennedy
@ davidkennedy85当然可以!但这是简单的方法,而不是 最好 办法... ;-) - yckart


String.prototype.capitalize = function(allWords) {
   return (allWords) ? // if all words
      this.split(' ').map(word => word.capitalize()).join(' ') : //break down phrase to words then  recursive calls until capitalizing all words
      this.charAt(0).toUpperCase() + this.slice(1); // if allWords is undefined , capitalize only the first word , mean the first char 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 char which is capitalized by `toUpperCase()` method
 ).join('')                                             //return back to string

然后 capitalize("hello") // Hello


44
2017-11-29 20:01



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