javascript uppercase first letter




JavaScriptで文字列の最初の文字を大文字にするにはどうすればよいですか? (20)

CSSのみ

p::first-letter {
  text-transform: uppercase;
}
  • ::first-letterと呼ばれているにもかかわらず、最初の文字に適用されます 。つまり、文字列%a場合、このセレクタは%aに適用されるため、 ::first-letter::first-letterされません。
  • IE9 +またはIE5.5 +では、1つのコロン( :first-letter )のみを使用して従来の表記法でサポートされています。

ES2015ワンライナー

元の問題を効率的に解決するES2015には数多くの回答がありますが、私は次のことを考え出しました。

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

備考

  • parameters => functionは、いわゆる矢印関数です。
  • OPは文字列全体の最初の文字を大文字にするコードを要求しなかったので、 capitalizeFirstChar代わりにcapitalizeFirstLetterという名前を使用しましたが、最初のchar(もちろん文字の場合)です。
  • constは、 capitalizeFirstCharを定数として宣言する能力を与えます。これは、プログラマとして、常に明示的にあなたの意図を述べる必要があるので望ましいです。
  • 私が行ったベンチマークでは、 string.charAt(0)string[0]間に大きな違いはありませんでした。 ただし、 string[0]は空の文字列ではundefinedれていないので、 string && string[0]に書き直す必要があります。
  • string.substring(1)string.substring(1)より高速です。

基準

  • この溶液について4,956,962 ops / s±3.03%
  • 最も投票された答えは4,577,946 ops / s±1.2%。
  • Google Chrome 57のJSBench.meで作成されJSBench.meた。

文字列の最初の文字を大文字にするが、他の文字の大文字と小文字を変更しないでください。

例えば:

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

投稿されたいくつかの異なるメソッドのパフォーマンスに興味がある場合:

ここでは、 このjsperfテストに基づいた最速の方法があります(最速から最速まで)。

ご覧のように、最初の2つの方法は基本的に性能面で比較可能String.prototypeが、 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);
}


underscore.jsまたはLo-Dashを使用する場合、 underscore.stringライブラリは、capitalizeを含む文字列拡張を提供します。

_.capitalize(string)文字列の最初の文字を大文字に変換します。

例:

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

ucfirst関数は、このようにすると機能します。

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

教えていただきありがとうございました。


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"

これは、文字列を2つの部分に分割することによって機能します。 最初の行ではfirstLetterを引き出し、2行目ではfirstLetter.toUpperCase()を呼び出してfirstLetterを大文字にし、 str.substr(1)を呼び出して見つかった残りの文字列と結合します。

これは空の文字列では失敗すると思うかもしれませんが、実際C言語のような言語ではこれを満たす必要があります。 しかし、JavaScriptでは、空文字列の部分文字列を取ると空の文字列が返されます。


これは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


あなたがすでにlodashを使用している(または考慮している)場合、その解決法は簡単です:

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

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

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

ドキュメントをhttps://lodash.com/docs#capitalizehttps://lodash.com/docs#capitalize : 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'

最初の大文字のバニラjs:

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

あなたはこのように1行で行うことができます

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

すべて大文字のテキストを再フォーマットする場合は、他の例を次のように変更することをお勧めします。

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

これにより、次のテキストが確実に変更されます。

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

それはCSSの方が簡単だと思われます:

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

これは、 CSS text-transformプロパティW3Schools )からのものです。


別のケースでは、最初の文字を大文字にし、残りを小文字にする必要があります。 次のケースで私はこの機能を変更しました:

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

文字列を配列として扱うことで最初の文字を取得する一般的な答えの短縮版です:

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

私はお気に入りのRegExpの1文字目を、かわいいスマイリーのように/^./ます: /^./

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

CoffeeScript、文字列のプロトタイプに追加します。

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

使用方法は次のとおりです。

"woobie".capitalize()

どちらが得られる:

"Woobie"

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

使用法:

capitalizedString = someString.capitalize();

これはテキスト文字列=>これはテキスト文字列です


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"

FUNのためにNov.2016(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

then capitalize("hello") // Hello


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

他のいくつかの答えはString.prototype修正しString.prototype (これも同様に答えました)、保守性のためにこれに反対してString.prototype (関数がprototypeに追加されている場所を見つけることは難しく、名前/ブラウザは将来同じ名前のネイティブ関数を追加します)。


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

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

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




letter