JavaScriptで文章をタイトルケースに変換する方法

文字列を受け取り、その中のすべての単語の先頭文字を大文字に変換し、残りの文字はすべて小文字にする関数を作成することを考えてみましょう。これは「タイトルケース」と呼ばれる書式で、記事の見出しなどによく使われます。

処理のイメージ

例えば、入力文字列が以下だった場合：

hello world coding is very interesting

期待される出力は次のとおりです。

Hello World Coding Is Very Interesting

このような処理を実現するため、文字列を受け取って各単語の先頭文字を大文字にした新しい文字列を返す関数 capitaliseTitle() を定義してみましょう。

実装例

let str = 'hello world coding is very interesting';
const capitaliseTitle = (str) => {
    const string = str
    .toLowerCase()
    .split(" ")
    .map(word => {
        return word[0]
        .toUpperCase() + word.substr(1, word.length);
    })
    .join(" ");
    return string;
}
console.log(capitaliseTitle(str));

コードの解説

このコードの動作を順番に見ていきましょう。

• toLowerCase()：まず文字列全体を小文字に統一し、入力の大文字・小文字の揺れをなくします。
• split(" ")：スペースを区切り文字として文字列を配列に分割します。
• map()：各単語に対して、1文字目（word[0]）を toUpperCase() で大文字に変換し、substr(1, word.length) で取り出した2文字目以降と連結します。
• join(" ")：処理後の単語たちを再びスペースで連結し、1つの文字列に戻します。

よりモダンな書き方

なお、substr() は現在では非推奨（deprecated）とされているため、slice() を使った次の書き方がおすすめです。こちらの方が簡潔で読みやすくなります。

const capitaliseTitle = (str) =>
    str
        .toLowerCase()
        .split(" ")
        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
        .join(" ");

出力

コンソールには次のように表示されます。

Hello World Coding Is Very Interesting