JavaScriptで文字列の最初の文字を大文字にする方法を教えてください。


3762

文字列の最初の文字を大文字にして、他の文字の大文字と小文字を変更しない方法を教えてください。

例えば:

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

12
アンダースコアは、と呼ばれるプラグインがありunderscore.stringこれと他の偉大なツールの束を含んでいます。
アーロン

何について:return str.replace(/(\b\w)/gi,function(m){return m.toUpperCase();});
Muhammad Umer 2014年

111
よりシンプル:string[0].toUpperCase() + string.substring(1)
dr.dimitru 2015年

7
`${s[0].toUpperCase()}${s.slice(1)}`
noego

([initial, ...rest]) => [initial.toUpperCase(), ...rest].join("")
КонстантинВан

回答:


5811

基本的な解決策は次のとおりです。

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

console.log(capitalizeFirstLetter('foo')); // Foo

他のいくつかの回答は変更String.prototypeされています(この回答も以前は使用されていました)が、保守性のためにこれに対して反対のアドバイスをします(関数がに追加されている場所を見つけるのが難しくprototype、他のコードが同じ名前/ブラウザーを使用している場合に競合を引き起こす可能性があります)同じ名前のネイティブ関数を将来追加します)。

...そして、この驚くべき良い答え(下に埋められている)が示すように、国際化を考えると、この質問にははるかに多くのことが含まれています。

コード単位の代わりにUnicodeコードポイントを使用する場合(たとえば、基本多言語プレーンの外部でUnicode文字を処理する場合)String#[@iterator]、コードポイントで機能する事実を利用toLocaleUpperCaseでき、ロケールに応じた大文字を使用できます。

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

console.log(capitalizeFirstLetter('foo')); // Foo
console.log(capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉")); // "𐐎𐐲𐑌𐐼𐐲𐑉" (correct!)
console.log(capitalizeFirstLetter("italya", 'tr')); // İtalya" (correct in Turkish Latin!)

さらに多くの国際化オプションについては、以下元の回答を参照してください。


9
substringは、substrよりも多くのブラウザで理解されています
mplungjan

6
karim79に追加します-javascriptが関数をラップせずに変数に対して同じことを行うので、それを関数にすることはおそらくやり過ぎです。関数を使用するとより明確になると思いますが、それ以外の場合はネイティブですが、なぜ関数ラッパーで複雑にするのですか?
ロス

18
また、スライス(1)をtoLowerCaseする必要はありませんか?
2014年

177
いいえ、OPがこの例を示したためですthe Eiffel Tower -> The Eiffel Tower。さらに、関数はcapitaliseFirstLetternot と呼ばれcapitaliseFirstLetterAndLowerCaseAllTheOthersます。
ban-geoengineering 2014

22
誰もOOPの重要なルールを気にしませんか?- 所有していないオブジェクトを編集しないでください。。ところで、このワンライナーははるかにエレガントに見えます:string[0].toUpperCase() + string.substring(1)
dr.dimitru

1350

これは、よりオブジェクト指向のアプローチです。

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

次のように関数を呼び出します。

"hello world".capitalize();

予想される出力は次のとおりです。

"Hello world" 

24
Rubyのようなこのソリューションが好きで、Rubyは甘いです!:)それは正確にルビーのように動作するように私は、文字列の他のすべての文字を小文字:return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase();
ma11hew28

164
このPost-Prototype.jsの世界では、ネイティブオブジェクトを変更または拡張することはお勧めしません。
ライアン、

191
@rxgx-"延長しない" boogeymanは今や消滅し始めており(神に感謝)、人々はjSandから頭を引き出し、それが単なる言語機能であることを認識しています。Prototype.jsがObject自体を短時間拡張したからといって、Nativesの拡張が悪いことを意味するわけではありません。未知の消費者向けのコード(ランダムなサイトで実行される分析スクリプトなど)を記述している場合は、これを行うべきではありませんが、それ以外は問題ありません。
csuwldcat

43
@csuwldcat使用している別のライブラリが、知らないうちに独自の大文字を追加するとどうなりますか?プロトタイプの拡張は、Prototype.jsが拡張したかどうかに関係なく、不適切な形式です。ES6では、組み込み関数を使用すると、ケーキを手に入れて食べることができます。ECMASCRIPT仕様に準拠したシムを作成している人々にとって、「ブギーマン」が消滅するのを混乱させるかもしれません。シムを追加した別のライブラリが同じ方法でシムを実装するため、これらのシムはまったく問題ありません。ただし、独自の非仕様組み込み関数を追加することは避けてください。
ジャスティンマイヤー

43
ネイティブの拡張は非常に悪い習慣です。あなたが「ああ、私はこのコードを他のもので使うつもりは決してない」と言ったとしても、おそらくあなた(または他の誰か)は使うでしょう。次に、誰かがNumber.money()を拡張して、他のライブラリとは少し異なる通貨を処理するようにしたので、奇妙な数学のバグを理解しようと3日間費やします。真剣に、私はこれが大企業で起こるのを見ました、そして、ネイティブのプロトタイプで台無しにされたライブラリ開発者を理解するために誰も時間をデバッグする価値はありません。
phreakhead 2014

574

CSS:

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

80
OPはJSソリューションを求めています。
アントニオマックス

129
$( '#mystring_id')。text(string).css( 'text-transform'、 'capitalize');
DonMB、2015

21
さらに、これは文字列の表示にのみ影響し、実際の値には影響しません。たとえば、フォームの場合、値はそのまま送信されます。
dmansfield 2016年

12
この回答は、CSSソリューションの方が自分がやっていることにより適していることを理解するのに役立ちました。@dudewad:答えはおそらくこれがJSソリューションではないが必要に応じてより適切かもしれないという免責事項を与えるべきです。
joshden 2018年

58
この質問に訪れる視聴者の約80%にとって、これが最良の答えです。ないと答え、質問、それに問題が代わりに。
ジバン

290

文字列を配列として処理することで最初の文字を取得する一般的な回答の短縮版を次に示します。

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

23
これらのブラウザーは文字列のインデックス作成をサポートしていないため、IE <8では機能しません。IE8自体がサポートしていますが、文字列リテラルのみで、文字列オブジェクトはサポートしていません。
Mathias Bynens、2012

52
気にする人、IE7市場は5%未満です!そしてそれらはおそらくあなたのグレムマとグレンパの古いマシンでしょう。FTWという短いコードです。
vsync

@MathiasBynensこれが、IE以外の古いブラウザに影響するのか、IE7だけに影響するのか知っていますか?2014年に他のブラウザーが文字列リテラルのインデックス作成の影響を受けない場合は、問題ありません。:)
hexalys 2014年

3
@vsync私はユーザーの人口統計に応じて、場合によっては(2014年以降は感謝しますが少なくなりますが)IE7のような古いブラウザーをサポートすることが有益であるということを意味します...
joshuahedlund

2
:@ njzk2空の文字列を処理するために、あなたはこれにアップデートすることができ return s && s[0].toUpperCase() + s.slice(1);
joelvh

188

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

このjsperfテストに基づく最速の方法は次のとおりです(最速から最遅の順に並べられます)。

ご覧のとおり、最初の2つの方法はパフォーマンスの点では本質的に同等ですが、これを変更する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);
}

ここに画像の説明を入力してください


1
初期化コードでも違いはないようです:jsperf.com/capitalize-first-letter-of-string/2
user420667

6
また、に置き換える.slice(1).substr(1)パフォーマンスがさらに向上することにも注意してください。
Przemek 2017

2
合理的な配慮。ただし、多くの場合、パフォーマンスへの影響はそれほど目立たないことに注意してください。「最も遅い」アプローチでも、19 msの文字列を10ミリ秒で処理します。だからあなたのために最も使いやすいものを選んでください。
Eddieの引用

1
誰かが(私のように)過去4年間でこのパフォーマンスがどのように向上したかを知りたい場合、2018 Macbook Proの3番目の関数のops / secは135,307,869であり、基本的に12.4倍高速です。
カルロフィールド

151

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

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

1
「...しかし、他の文字の大文字と小文字は変更しない」。これは、OPが尋ねた質問に対する正しい答えではありません。
CarlosMuñoz14年

2
@CarlosMuñozは、冒頭の文を読んだ場合、これは別のケースのためだと言っています。
TMH 2014

3
@TomHartそれがまさにそれが問題の解決策ではない理由です。これは、コメントや他の質問と回答する必要があります
カルロス・ムニョス

15
その点についてはあなたにも同意しますが、この回答で何をしようとしているのか、多くの人がここに集まっているのがわかります。
TMH 2014

74

これは2018 ECMAScript 6+ソリューションです:

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


5
.slice()より遅い.substring()str[0]となりundefinedながら、空の文字列のために、ここで8文字に2本のパーツの紹介に参加するテンプレートリテラルを使用して+のみ3を導入する
Przemek

4
私の回答Przのポイントは、ES6でサポートされる新しい機能、特に他の投稿で言及されていないテンプレートリテラルを紹介することです。StackOverflowのアイデアは、サーチャーに「オプション」を提供することです。彼らは、この回答で説明されているテンプレートリテラルの概念を取り入れ、サブストリングv。スライスなどのマイクロスピード拡張機能と組み合わせることができます。私の回答には単体テストも含まれていません。これは、StackOverflow回答を直接コピーペーストしてはならないことを示しています。私は開発者が私の答えを取り入れてそれを適応させると思います。
スターリングボーン

ここでテンプレートリテラルを使用しても何も得られず、${}ノイズが追加されます。const newStr = str[0].toUpperCase() + str.slice(1);読みやすいです。
ボリス

1
次に、読みやすいものについては同意しないことに同意します。
Sterling Bourne

67

を既に使用している(または検討している)場合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'

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

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

11
ほとんどの人は文字列を大文字にするためだけにフレームワーク全体をダウンロードするわけではないので、私はバニラJsを優先するべきだと思います。
GGG

7
これまでのすべてのプロジェクトで、lodashを使用したことはありません。また、Googleのほとんどの人がこのページで終了することを忘れないでください。代替としてフレームワークをリストすることは問題ありませんが、主な答えとしてではありません。
GGG

2
他の回答ではバニラjsを使用しているため、多くの場合lodash / underscoreを使用しているため、このような回答があるのは素晴らしいことです。
呂ローマの

1
これは正しい答えではありません。OPは、ライブラリ全体をプロジェクトへの依存関係としてインポートするJavascriptライブラリではなく、Javascriptでそれを実行するように求めているためです。使用しないでください。
dudewad 2017

1
OPの質問は私の答えの終わりにバニラにあります。
2017

62

文字列内のすべての単語の最初の文字を大文字にします。

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

14
質問をもう一度読んでください。文字列の最初の文字を大文字にしますが、他の文字の大文字と小文字は変更しません。
JimmyPena

2
私はそうしました。文字列全体が大文字で始まる場合に備えて、1つ追加します。pieces[i] = j + piece [i] .substr(1).toLowerCase();
Malovich

4
この場合の別の解決策:function capitaliseFirstLetters(s){return s.split( "").map(function(w){return w.charAt(0).toUpperCase()+ w.substr(1)})。join ( "")}関数に入力しない場合は、1行で記述できます。
ルークチャニングス2013年

最初に文字列全体を小文字にするとよいでしょう
Magico

この機能が質問に答えないことを除いて、それは実際にも複雑すぎる。s => s.split(' ').map(x => x[0].toUpperCase() + x.slice(1)).join(' ')
OverCoder 2017

48

私は私のお気に入りの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();
  });
};

2
Stringプロトタイプを変更せずにこれを行うより良い方法があります。
Big McLargeHuge 2013

2
@ davidkennedy85もちろん!しかし、これは簡単な方法であり、最善の方法ではありません... ;-)
yckart

親愛なる殿様この質問には百万の答えがあります!あなたのソリューションはes6でさらに良く見えます。'Answer'.replace(/^./, v => v.toLowerCase())
stwilz

47

使用する:

var str = "ruby java";

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

"Ruby java"コンソールに出力されます。


1行のソリューション。
Ahmad Sharif

45

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

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

例:

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

3
バージョン3.0.0以降、Lo-Dashにはこの文字列メソッドがデフォルトで使用可能になっています。この回答で説明したように:_.capitalize("foo") === "Foo"
bardzusny 2015

また、という便利なunderscore.js関数もありますhumanize。アンダースコア、キャメル化、またはダッシュ化された文字列を人間化された文字列に変換します。また、先頭と末尾の空白を削除し、接尾辞 '_id'を削除します。
Stepan Zakharov、2015年

1
バージョン4 *以降、Lodashは1文字おきにlowercase()も使用します。注意してください!
Igor Loskutov 2016

45
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のためだけに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


3
これは2つの理由で不十分な解決策だと思います。プリミティブのプロトタイプを変更することは悪い考えです。仕様が変更され、新しいプロトプロパティ名として 'capitalize'を選択する場合は、コア言語の機能が壊れています。また、選択されたメソッド名は貧弱です。一見すると、これにより文字列全体が大文字になると思います。PHPのucFirstなどのわかりやすい名前を使用することをお勧めします。
dudewad 2017

ES6のもう1つの答えはより簡単ですconst capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('').toLowerCase();
Dan Dascalescu

44

最短 3つのソリューション、1及び2ハンドルケースsの文字列がある""nullundefined

 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


42

CSSのみ

p::first-letter {
  text-transform: uppercase;
}
  • 呼び出されているにもかかわらず::first-letter、最初の文字に適用されます。つまり、stringの場合%a、このセレクターが適用されるため%a大文字にはなりません。
  • IE9 +またはIE5.5 +では、コロン(:first-letter)が1つだけのレガシー表記でサポートされます。

ES2015ワンライナー

多数の回答がありますが、ES2015には元の問題を効率的に解決するものはないため、次のことを思いつきました。

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

備考

  • parameters => functionいわゆるアロー機能です。
  • OPが文字列全体の最初の文字を大文字にするコードを要求しなかったため、名前のcapitalizeFirstChar代わりに名前を使用しましたがcapitalizeFirstLetter、最初の文字(もちろん、それが文字の場合)です。
  • constcapitalizeFirstChar定数として宣言する機能を提供します。これは、プログラマーとして常に明示的に意図を示す必要があるためです。
  • 私が実行したベンチマークでは、との間に有意差は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で作成されました。

ソリューションの比較


@Green:そうです、セレクターを2つのコロンで指定してよろしいですか?
Przemek 2017年

1
ES6では、連結方式として正符号(+)を実際に使用したくありません。テンプレートリテラルを使用する必要があります:eslint.org/docs/rules/prefer-template
Sterling Bourne

42

replaceで実装する非常に簡単な方法があります。ECMAScript 6の場合:

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

結果:

'Foo'

1
最高の答えと、正規表現のラムダ構文を表示するための追加ポイント。どこでも流暢にカットアンドペーストできるので、私は特にこれが好きです。
Wade Hatler、

以前のものはアルファベット以外の文字を置き換えようとしないため/^[a-z]/i、を使用するよりも使用する方がよい.
コードマニアック

38

CSSの方が簡単なようです。

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

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


29
@Simon文字列が必ずしもHTMLドキュメントの一部として出力されることは明言されていません-CSSは、それが使用される場合にのみ使用されます。
アダムヘプトン2012年

9
Adamさん、本当ですが、Javascriptの95%以上がHTMLとCSSで使用されていると思います。残念ながら、「capitalize」ステートメントは実際にはすべての単語を大文字にするため、JSで文字列の最初の文字のみを大文字にする必要があります。
Simon East

18
不正解、ディネシュ。彼は文字列の最初の文字を言っ
Simon East

81
この回答は、ばかげた数の賛成投票があるにもかかわらず、すべての単語の最初の文字を大文字にするため、間違っています。@ライアン、あなたがそれを削除した場合、あなたは規律バッジを獲得します。そうしてください。
Dan Dascalescu

10
@DanDascalescuに同意する-ライアンの答えは完全に間違っています。
Timo

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

38

アストラルプレーンのコードポイントや国際化に関連する問題の既存の回答には何も言及されていません。「大文字」は、特定のスクリプトを使用するすべての言語で同じことを意味するわけではありません。

最初は、アストラルプレーンのコードポイントに関連する問題に対処する回答はありませんでした。1つあります、少し埋まっています(このようになると思います!)


提案された関数のほとんどは次のようになります。

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

ただし、大文字と小文字が区別される一部の文字はBMPの外側にあります(基本的な多言語プレーン、コードポイントU + 0からU + FFFF)。たとえば、次のDeseretテキストを見てください。

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉"); // "𐐶𐐲𐑌𐐼𐐲𐑉"

文字列の配列インデックス付きプロパティは「文字」またはコードポイント*にアクセスしないため、ここの最初の文字は大文字にできません。それらはUTF-16コード単位にアクセスします。これはスライスする場合にも当てはまります。インデックス値はコード単位を指しています。

たまたま、UTF-16コード単位は1:1であり、USVコードポイントはU + 0からU + D7FFおよびU + E000からU + FFFFの2つの範囲内にあります。ほとんどの大文字と小文字が区別される文字は、これらの2つの範囲に分類されますが、すべてではありません。

ES2015以降、これへの対処は少し簡単になりました。String.prototype[@@iterator]コードポイント**に対応する文字列を生成します。たとえば、次のようにできます。

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

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

より長い文字列の場合、これはおそらくそれほど効率的ではありません*** —残りの部分を繰り返す必要はありません。String.prototype.codePointAt最初の(可能性のある)文字を取得するために使用できますが、スライスの開始位置を決定する必要があります。残りの反復を回避する1つの方法は、最初のコードポイントがBMPの外側にあるかどうかをテストすることです。そうでない場合、スライスは1から始まり、1の場合、スライスは2から始まります。

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

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

capitalizeFirstLetter("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

代わりにビット単位の数学を使用することもできます> 0xFFFFが、この方法を理解する方がおそらく簡単であり、どちらも同じことを実現します。

また、必要に応じて、そのロジックをもう少し進めることで、ES5以下でこれを機能させることもできます。ES5にはコードポイントを操作するための組み込みメソッドがないため、最初のコードユニットがサロゲートであるかどうかを手動でテストする必要があります****。

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("𐐶𐐲𐑌𐐼𐐲𐑉") // "𐐎𐐲𐑌𐐼𐐲𐑉"

最初に、国際化の考慮事項についても触れました。これらのいくつかは、何を知っているだけでなく、は、使用されて言語、その言語の単語に関する特定の知識も必要とする場合があるです。たとえば、アイルランド語のダイグラフ「mb」は、単語の先頭で「mB」として大文字になります。もう1つの例、ドイツ語のeszettは、単語(afaik)を開始することはありませんが、問題の説明に役立ちます。小文字のeszett(「ß」)は「SS」を大文字にしますが、「SS」は「ß」または「ss」のいずれかに小文字にすることができます。どちらが正しいかを知るには、ドイツ語の帯域外の知識が必要です。

この種の問題の最も有名な例は、おそらくトルコ語です。トルコ語ラテン語では、iの大文字の形式はisですが、Iの小文字の形式はıです—これらは2つの異なる文字です。幸いなことに、これを説明する方法があります。

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

capitalizeFirstLetter("italy", "en") // "Italy"
capitalizeFirstLetter("italya", "tr") // "İtalya"

ブラウザーでは、ユーザーの最も優先される言語タグはで示されnavigator.language、優先順位のリストはnavigator.languagesにあり、特定のDOM要素の言語は(通常)Object(element.closest('[lang]')).lang || YOUR_DEFAULT_HERE多言語ドキュメントで取得できます。

ES2018で導入されたRegExpのUnicodeプロパティ文字クラスをサポートするエージェントでは、関心のある文字を直接表現することで、さらにクリーンアップできます。

function capitalizeFirstLetter(str, locale=navigator.language) {
  return str.replace(/^\p{CWU}/u, char => char.toLocaleUpperCase(locale));
}

これを少し調整して、文字列内の複数の単語の大文字化をかなり正確に処理することもできます。CWUまたはChanges_When_Uppercased文字プロパティは大文字、よく、変更のすべてのコードポイントにマッチします。私たちは、オランダのようなタイトルケース有向グラフ文字で、このうちを試すことができますij例えば:

capitalizeFirstLetter('ijsselmeer'); // "IJsselmeer"

執筆時点(2020年2月)では、Firefox / Spidermonkeyは、過去2年間に導入されたRegExp機能をまだ実装していません*****。この機能の現在のステータスは、Kangax compat tableで確認できます。Babelは、RegExpリテラルを、それらを含まない同等のパターンへのプロパティ参照でコンパイルできますが、結果のコードが膨大になる可能性があることに注意してください。


おそらく、この質問をする人々は、Deseretの大文字化または国際化に関与しません。ただし、これらの問題は、現時点では問題になっていなくても、最終的には発生する可能性が高いため、注意が必要です。それらは「エッジ」ケースではなく、むしろ定義によるエッジケースではありません。とにかくほとんどの人がトルコ語を話す国があり、コードポイントとコードユニットを融合させることは、かなり一般的なバグのソースです(特に絵文字に関して)。文字列と言語はどちらもかなり複雑です!


* UTF-16 / UCS2のコード単位は、たとえばU + D800が技術的にコードポイントであるという意味でUnicodeコードポイントでもありますが、ここでは「意味する」ことではありません...ファジー。サロゲートが間違いなくそうではないのは、USV(Unicodeスカラー値)です。

**サロゲートコードユニットが「孤立」している場合、つまり論理ペアの一部ではない場合でも、ここでもサロゲートを取得できます。

*** 多分。私はそれをテストしていません。大文字の使用が意味のあるボトルネックであると判断しない限り、私はおそらくそれを気にすることはありません。最も明確で読みやすいと思われるものを選択してください。

****最初のユニットが孤立したサロゲートである可能性があるため、このような関数では、最初のコードユニットだけでなく、最初と2番目のコードユニットの両方をテストする場合があります。たとえば、「\ uD800x」と入力すると、Xがそのまま大文字になります。

***** 進行状況をより直接追跡したい場合のBugzillaの問題は次のとおりです。


2
この答えは前に移動する必要があります。
ルナー・バーグ

@RúnarBergに感謝します—あなたのコメントはこれについて思い出させてくれたので、もう一度読んでみて、言及する価値のある最後のケースと解決策を省いていたことに気付きました。また、一部の用語をわかりやすく説明しようとしました。
セミコロン

素晴らしい答え.....
ベンアストン

この答えは素晴らしいです。もっと賛成したいと思います。
David Barker

37

通常、最初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'
capitalizeTxt('alireza');  // return 'Alireza'

何度も再利用したい場合は、JavaScriptのネイティブ文字列にアタッチすることをお勧めします。

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'

36

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

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

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

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

おそらく、これは頭字語のようなものも小文字に変換するので、おそらくほとんどの場合最良のアイデアではないことに注意してください
モノクローム

また、GAMITG は、投稿のコード以外の部分から空白を削除するために本当に編集を行ったのですか?O_O
モノクローム

ところで、これは大文字の頭字語を壊すので注意してくださいy'all <3
monokrome

34
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'

@Ram完了。例も含まれています。
Fredrik A.

これは2009年の回答よりも優れていますか?
Dan Dascalescu、

1
@DanDascalescuではありません。substr/ substringはとは対照的にもう少しセマンティックであると主張できるかもしれませんがslice、それは好みの問題です。ただし、質問で提供された文字列を使用した例は含めました。これは、'09の例にはない素晴らしいタッチです。正直なところ、私はStackOverflowでカルマを求めている15歳になると思います;)
Fredrik A.

34

ここに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を呼び出すことによってfirstLetter.toUpperCaseを()と呼び出すことによって発見された文字列の残りの部分とそれを結合str.substr(1)

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


4
String.substring()またはString.slice()を使用してください... substr()は使用しないでください-非推奨です。
ジェームズ

7
@ 999:substr()廃止予定はどこにあるのですか?そうではありませんあなたはこのコメントをしたとき、今でも、3年後、2009年に一人で戻ってみましょう。
Dan Dascalescu、2012年

substr()一般的なECMAScript実装によって非推奨としてマークされていない可能性がありますが(すぐになくなることはないと思います)、ECMAScript仕様の一部ではありません。仕様の第3版では、「プロパティまたはそのセマンティクスをこの標準の一部にすることなく、そのようなプロパティの均一なセマンティクスを提案する」ために、非規範的な付属書でそれについて言及しています。
Peter Rust

2
同じことを行う3つのメソッド(substringsubstrおよびslice)は多すぎるIMO。slice負のインデックスをサポートしているため、常に使用しています。紛らわしいarg-swapping動作がなく、そのAPIはslice他の言語と似ています。
Peter Rust

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

使用法:

capitalizedString = someString.capitalize();

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


20
正規表現はこれには過剰です。
Anthony Sottile

+1、これは私が本当に探していたものです。マイナーなバグがありますが、それはreturn.this.toLocaleLowerCase().replace(...
tomdemuyt

+1、私はこのページをphpfirst ucfirstのJavaScriptバージョンを探していることを発見しました。
Benubird 2013

@DanDascalescu私はこれが有用だと思ったので、功利主義を+1し、肛門保持力を-1にしました。彼は例を含めたので、その機能は明らかです。
Travis Webb 2013

String.prototype.capitalize = function(){ return this.replace( /(^|\s)[a-z]/g , function(m){ return m.toUpperCase(); }); }; 私はあなたのコードを少しリファクタリングします、最初の一致だけが必要です。
IGRACH 2014

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

21

このソリューションをチェックアウト:

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

3
これは受け入れられる答えになるはずです。メインのソリューションでは、アンダースコアのようなフレームワークを使用しないでください。
アダムマッカーサー2015

3
いくつかのキーストロークを保存します;)stringVal.replace(/^./, stringVal[0].toUpperCase());
Alfredo Delgado

1
Regexは、必要のない場所では使用しないでください。これは非常に非効率的であり、コードを簡潔にすることもできません。また、stringVal[0]だろうundefined、空のためstringVal、アクセスプロパティにそのような試みとして、.toUpperCase()エラーをスローします。
Przemek 2017

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

(これを関数にカプセル化することも、頻繁に使用する場合はStringプロトタイプに追加することもできます。)


5
これにはかなりの票がありますが、ここに掲載されている最も遅いソリューションです。私はこの投稿からの最も人気のある回答を少しスピードテストでまとめました。ここでは、forwebonly.com
Robin van Baalen

@RobinvanBaalenリンクが壊れています。更新されたものを手に入れましたか?
ブラッド

1
Regexpはこれには過剰です。より単純な方をお勧めします。str.charAt(0).toUpperCase()+ str.slice(1)
Simon

@Brad残念ながらできません
Robin van Baalen 2017年

多くの場合、正規表現で問題を解決したい場合、2つの問題が発生します。
Przemek 2017

19

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

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

JPに説明してくれてありがとう。


2
関数の素敵な名前!その名前はPHPの同等のものと同じです。実際には、JSで記述されたPHP関数のライブラリ全体があります。これはPHP.jsと呼ばれ、http:
Hussam

11
1つのライナー:string[0].toUpperCase() + string.substring(1)
dr.dimitru 2015年

@TarranJonesは、ここで1つのライナーを防弾しています:(string[0] || '').toUpperCase() + string.substring(1)
dr.dimitru

@ dr.dimitru:慣用句の代わりに、(string[0] || '')単にstring.charAt(0)
Przemek 2017


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

私はこの矢印関数が最も簡単だと思いました。Replace\wは、ストリングの最初の文字()に一致し、それを大文字に変換します。特別なことは何も必要ありません。


1
これは受け入れられる答えであるはずですが、SOが古い質問を与え続けているので、それはほとんど最後ではありません。ところで、次の/./2つの理由で使用する方が良いです。/\w/以前のすべての文字以外の文字をスキップし(@@ abcは@@ Abcになります)、ラテン文字以外では機能しません
CristianTraìnaApr
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.