Вопрос: Как сделать первую букву строки в верхнем регистре в JavaScript?


Как сделать первую букву строки в верхнем регистре, но не изменить случай любой из других букв?

Например:

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

2895


источник


Ответы:


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

Некоторые другие ответы меняют String.prototype(этот ответ также использовался), но я бы посоветовал это сейчас из-за ремонтопригодности (трудно узнать, где функция добавляется к prototypeи может вызвать конфликты, если другой код использует одно и то же имя / браузер добавляет в будущем собственную функцию с таким же именем).


4621



Более объектно-ориентированный подход:

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

А потом:

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

1182



В CSS:

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

396



Вот укороченная версия популярного ответа, который получает первую букву, обрабатывая строку как массив:

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

233



Если вас интересует выступление нескольких различных методов:

Вот самые быстрые методы, основанные на этот тест 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


131



Для другого случая мне нужно, чтобы он заглавил первую букву, а нижний - остальные. Следующие случаи заставили меня изменить эту функцию:

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

121



Here are the best solutions:

First Solution In CSS:

p {
  text-transform: capitalize;
}

Second solution :

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

You could also add it to the String.prototype so you could chain it with other methods:

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

and use it like this:

'string'.capitalizeFirstLetter() // String

Third Solution:

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

104



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

62



Capitalize the first letter of all words in a 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);
    }
    return pieces.join(" ");
}

58



We could get the first character with one of my favorite RegExp, looks like a cute smiley: /^./

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

And for all coffee-junkies:

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

...and for all guys who think that there's a better way of doing this, without extending native prototypes:

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

44



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
}

And then:

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

Update Nov.2016 (ES6), just for FUN :

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

then capitalize("hello") // Hello


44