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

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

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

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

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

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

我们可以用我最喜欢的第一个角色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.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

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

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

例:

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

仅限CSS

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

尽管被调用::first-letter,但它适用于第一个字符,即在字符串的情况下%a,此选择器将适用于%并且因此a不会被大写.

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

ES2015单线

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

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

备注

parameters => function就是所谓的箭头功能.

我选择了名字capitalizeFirstChar而不是capitalizeFirstLetter,因为OP并没有要求代码将整个字符串中的第一个字母大写,而是第一个字母(当然,如果是字母).

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创建.

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

在CSS中似乎更容易:

This is some text.

这是来自CSS text-transform Property(在W3Schools).

首先使用CSS处理这些东西总是更好,一般来说,如果你可以使用CSS解决问题,先去做,然后尝试JavaScript来解决你的问题,所以在这种情况下尝试使用:first-letterCSS并申请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'

如果你想一遍又一遍地重复使用它,最好将它附加到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'
'alireza'.capitalizeTxt();  // return 'Alireza'

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

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

这将确保更改以下文本:

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

var str = "ruby java";

console.log(str.charAt(0).toUpperCase() + str.substring(1));

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

'Foo'

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'

 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

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

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

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

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

capitalizedString = someString.capitalize();

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

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

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

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

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

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

const capitalize = ([s, ...tring]) =>
  [s.toUpperCase(), ...tring]
    .join('');

const titleCase = str => 
  str
    .split(' ')
    .map(capitalize)
    .join(' ')

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

"woobie".capitalize()

"Woobie"

function capitalize(string) {
    return string.replace(/^./, Function.call.bind("".toUpperCase));
}

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

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

capitalizeFirstLetter(""); // ""

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

capitalizeFirstLetter("") // ""

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

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

capitalizeFirstLetter("") // ""

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

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

capitalizeFirstLetter("italya", "en") // "Italya"
capitalizeFirstLetter("italya", "tr") // "?talya"

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

function ConvertFirstCharacterToUpperCase(text) {
    return text.substr(0, 1).toUpperCase() + text.substr(1);    
}

 alert(ConvertFirstCharacterToUpperCase("this is string"));

var str = "foo bar baz";

// capitalize
str.split(' ')
 .map(w => w[0].toUpperCase() + w.substr(1).toLowerCase())
 .join(' ')
// returns "Foo Bar Baz"

// capitalize first letter
str.charAt(0).toUpperCase() + str.slice(1)
// returns "Foo bar baz"

ucfirst = (str) -> str.charAt(0).toUpperCase() + str.slice(1)

String::capitalize = -> @charAt(0).toUpperCase() + @slice(1)

'hello'.capitalize()           -> 'Hello'
'hello kitty'.capitalize()     -> 'Hello kitty'
'hello kitty'.capitalize(true) -> 'Hello Kitty'

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

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

function firstUpperCase(input)
{
    return input[0].toUpperCase()+input.substr(1);
}

console.log(firstUpperCase("capitalize first letter"));

if (typeof String.prototype.capitalize !== 'function') {
    String.prototype.capitalize = function(lc, all) {
        if (all) {
            return this.split( " " ).map( function(currentValue, index, array ) {
                return currentValue.capitalize( lc );
            }, this).join(" ").split("-").map(function(currentValue, index, array) {
                return currentValue.capitalize(false);
            }, this).join("-");
        }
        else {
            return lc ? this.charAt(0).toUpperCase() + this.slice(1 ).toLowerCase() : this.charAt(0).toUpperCase() + this.slice(1);
        }
    }
}

let a = 'hello',
    fix = a.slice(0,1).toUpperCase()+a.slice(1)
    
console.log(fix)

var lower = 'the Eiffel Tower';
var upper = lower.charAt(0).toUpperCase() + lower.substr(1);

var upper = lower.replace(/^\w/, function (chr) {
  return chr.toUpperCase();
});

const upper = lower.replace(/^\w/, c => c.toUpperCase());

String.prototype.capitalize = function () {
    return this.replace(XRegExp("^\\p{L}"), function ($0) { return $0.toUpperCase(); })
}

var capitalizeMe = "string not starting with capital"

var capitalized = capitalizeMe.substr(0, 1).toUpperCase() + capitalizeMe.substr(1);

function capitalize(str) {
     var splittedEnter = str.split(" ");
     var capitalized;
     var capitalizedResult;
     for (var i = 0 ; i < splittedEnter.length ; i++){
         capitalized = splittedEnter[i].charAt(0).toUpperCase();
         splittedEnter[i] = capitalized + splittedEnter[i].substr(1).toLowerCase();
    }
    return splittedEnter.join(" ");
}

capitalize("tHiS wiLL be alL CapiTaLiZED.");

String name = request.getParameter("name");
name = name.toUpperCase().charAt(0) + name.substring(1);
out.println(name);

String name = "i am a Smartypants...";
name = name.toUpperCase().charAt(0) + name.substring(1);
out.println(name);

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

function capitalize(string,a) {
    var tempstr = string.toLowerCase();
    if (a == false || a == undefined)
        return tempstr.replace(tempstr[0], tempstr[0].toUpperCase());
    else {
        return tempstr.split(" ").map(function (i) { return i[0].toUpperCase() + i.substring(1) }).join(" ");
    }
}


capitalize('stack overflow yeah!',true)); //Stack Overflow Yeah!

capitalize('stack stack stack stack overflow yeah!'));//Stack overflow yeah!

'string'.replace(/(^[a-z])/,function (p) { return p.toUpperCase(); } )

String.prototype.toTitleCase = function(){
    return this.replace(/\b(\w+)/g, function(m,p){ return p[0].toUpperCase() + p.substr(1).toLowerCase() });
}

var s = 'heLLo wOrLD';
console.log(s.toTitleCase()); // Hello World

$("#FirstNameField").on("keydown",function(e){
    var str = $("#FirstNameField").val();
    if(str.substring()===str.substring(0,1)){
        $("#FirstNameField").val(str.substring(0,1).toUpperCase());
    } 
});

'access control allow origin'
    .replace(/\b\w/g, function (match) {
        return match.toUpperCase();
    })
    .split(' ')
    .join('-');

// Output: 'Access-Control-Allow-Origin'

function ucfirst (str) {
    return typeof str !="undefined"  ? (str += '', str[0].toUpperCase() + str.substr(1)) : '' ;
}

typeof str !="undefined" // is str set
? // true 
str += '' // turn the string variable into a string 
str[0].toUpperCase() //get the first character and make it upper case
+ // add
str.substr(1) // string starting from the index 1 ( starts at 0) 
: // false 
''; //return empty string

undefined         === ""
""                === ""
"my string"       === "My string"
null              === "Null"
undefined         === "";
false             === "False"
0                 === "0"
true              === "True"
[]                === ""
[true,0,"",false] === "True,0,,false"

function capitalizeEachWord(str) {
    return str.replace(/\w\S*/g, function(txt) {
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
}

document.write(capitalizeEachWord('foo BAR God bAD'));

const upper = lower.replace(/^\w/, c => c.toUpperCase());