各単語の先頭文字を大文字に変換するJavaScript関数の実装方法

はじめに

本記事では、文字列を受け取り、元の文字列に含まれる各単語の先頭文字だけを大文字に変換した新しい文字列を返すJavaScript関数の作成方法を解説します。このような処理は、見出しの整形や表示名の正規化など、Web開発のさまざまな場面で活用できます。

要件

たとえば、次のような入力文字列が与えられたとします。

const str = 'this is some random string';

この場合、期待される出力は以下のとおりです。

const output = 'This Is Some Random String';

コード例

実際の実装は次のようになります。

const str = 'this is some random string';
const capitaliseFirst = (str = '') => {
  const strArr = str.split(' ');
  const newArr = strArr.map(word => {
    const newWord = word[0].toUpperCase() + word.substr(1, word.length - 1);
    return newWord;
  });
  return newArr.join(' ');
};
console.log(capitaliseFirst(str));

出力結果

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

This Is Some Random String

コードの解説

この関数の処理は、大きく分けて3つのステップで構成されています。

1. split(' ') で単語ごとに分割：入力文字列を半角スペース区切りで配列に変換します。「this is some random string」の場合は ['this', 'is', 'some', 'random', 'string'] という配列が生成されます。
2. map() で各単語を変換：各単語に対して word[0].toUpperCase() で先頭の1文字を大文字にし、substr(1) で2文字目以降をそのまま連結して新しい単語を作成します。
3. join(' ') で再結合：変換後の単語たちをスペース区切りで結合し、新しい文字列として返します。

slice() を使ったよりモダンな書き方

substr() は現在では非推奨（deprecated）とされているため、slice() を使った次の書き方がおすすめです。

const capitaliseFirst = (str = '') =>
  str
    .split(' ')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ');

実装時の注意点

連続するスペースが含まれる文字列や空文字を扱う場合は注意が必要です。word[0] のように直接インデックスでアクセスすると、空の要素に対しては undefined が返り、エラーの原因になり得ます。charAt(0) のような安全なメソッドを使用するか、事前に filter(Boolean) で空要素を除去しておくと堅牢な実装になります。