提问



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


例如:



  • "this is a test" - > "This is a test"

  • "the Eiffel Tower" - > "The Eiffel Tower"

  • "/index.html" - > "/index.html"


最佳参考


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


一些其他的答案中修改String.prototype(使用以及这个答案),但我现在会反对这项建议,由于可维护性(很难找出其中的功能被添加到prototype,并可能导致冲突如果其他代码使用相同的名称/浏览器将来添加具有相同名称的本机函数)。

其它参考1


更面向对象的方法:


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


接着:


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

其它参考2


在CSS中:


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

其它参考3


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


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

其它参考4


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



以下是基于此jsperf测试的最快方法(从最快到最慢排序)。[93]


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


[94]

其它参考5


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


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

其它参考6


以下是最佳解决方案:


第一个解决方案在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(" ");
}

其它参考7


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

其它参考8


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


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

其它参考9


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

其它参考10


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

其它参考11


如果您已经(或正在考虑)使用lodash,解决方案很简单:


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

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

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


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


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


https://lodash.com/docs/4.15.0#camelCase[96]


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

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

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


第一个大写的Vanilla js:


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

其它参考12


如果使用underscore.js或Lo-Dash,则underscore.string库提供字符串扩展,包括大写:[97] [98] [99]



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



例:


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

其它参考13


这是2018年的ES6 +解决方案:




const str = 'the Eiffel Tower';
const newStr = `${str[0].toUpperCase()}${str.slice(1)}`;
console.log('Original String:', str); // the Eiffel Tower
console.log('New String:', newStr); // The Eiffel Tower



在CSS中似乎更容易:


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


这是来自 CSS text-transform Property (在W3Schools)。[100] [101]

其它参考14


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'

其它参考15


如果您想重新格式化全文字幕文本,您可能希望修改其他示例:


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


这将确保更改以下文本:


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

其它参考16


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

其它参考17


仅限CSS



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



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

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



ES2015单线



由于有很多答案,但在ES2015中没有一个能有效解决原始问题的答案,我想出了以下内容:[102]


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


说明




  • parameters => function是所谓的箭头功能。

  • 我与名称capitalizeFirstChar而非capitalizeFirstLetter,因为OP没去T要的那种大写整个字符串中的第一个字母,但很第一个字符代码(如果它的信,当然)。

  • const使我们能够将capitalizeFirstChar声明为常量,这是理想的,因为作为程序员,你应该总是明确表明你的意图。

  • 在我执行的基准测试中,string.charAt(0)string[0]之间没有显着差异。然而,注意,string[0]undefined为空字符串,所以它应该被重写为string && string[0],这是太冗长,相比于替代。

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



基准




  • 此解决方案为4,956,962 ops/s±3.03%,

  • 4,577,946 ops/s±1.2%为最多投票的答案。

  • 在Google Chrome 57上使用JSBench.me创建。



[103] [104] [105]

其它参考18


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


用法:


capitalizedString = someString.capitalize();


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

其它参考19


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

其它参考20


这是一个名为 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 按调用的 firstLetter.toUpperCase()并与它连接字符串的其余部分,通过调用 str.substr(1)找到。


您可能会认为这对于一个空字符串会失败,实际上在像C这样的语言中你必须满足这个要求。但是在JavaScript中,当您获取空字符串的子字符串时,您只需返回一个空字符串。

其它参考21


检查此解决方案:


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

其它参考22


yourString.replace(/^[a-z]/, function(m){ return m.toUpperCase() });


(您可以将其封装在函数中,如果经常使用它,甚至可以将其添加到String原型中。)

其它参考23


如果你这样做,ucfirst功能会起作用。


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


感谢J-P的声音。

其它参考24


你可以像这样在一行中完成


string[0].toUpperCase() + string.substring(1)

其它参考25


在CoffeeScript中,为字符串添加原型:[106]


String::capitalize = ->
  @substr(0, 1).toUpperCase() + @substr(1)


用法是:


"woobie".capitalize()


产量:


"Woobie"

其它参考26


它总是更好的使用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'


如果你想一遍又一遍地重复使用它,最好将它附加到javascript原生String,如下所示:


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'

其它参考27


// Uppercase first letter
function ucfirst(field) {
    field.value = field.value.substr(0, 1).toUpperCase() + field.value.substr(1);
}


用法:


<input type="text" onKeyup="ucfirst(this)" />

其它参考28


var str = "ruby java";

alert(str.charAt(0).toUpperCase() + str.substring(1));


它将返回"Ruby java"


http://jsfiddle.net/amitpandya/908c8e2v/[107]


结果链接在jsfiddle [108]