【JavaScript】文字列内のすべての単語の先頭に指定した文字を追加する方法

はじめに

本記事では、2つの文字列を引数として受け取り、1つ目の引数の文字列と同じ内容でありながら、すべての単語の先頭に2つ目の引数の文字列を付加した新しい文字列を返す関数をJavaScriptで作成する方法を解説します。

具体的なイメージは以下のとおりです。

入力 → 'hello stranger, how are you', '@@'
出力 → '@@hello @@stranger, @@how @@are @@you'

また、2番目の引数が省略された場合には、デフォルト値として「#」が自動的に適用される仕様とします。

実装コード

以下が実際のコードです。

const str = 'hello stranger, how are you';
const prependString = (str, text = '#') => {
  return str
    .split(" ")
    .map(word => `${text}${word}`)
    .join(" ");
};
console.log(prependString(str));
console.log(prependString(str, '43'));

処理の流れ

この関数の仕組みを順を追って確認しましょう。

• split(" ")：元の文字列をスペースで区切り、単語ごとの配列に変換します。
• map()：配列内の各単語に対して、テンプレートリテラルを用いて先頭に指定した文字列（text）を結合します。
• join(" ")：処理後の配列を再びスペース区切りの1つの文字列へと連結し直します。

さらに、デフォルトパラメータ text = '#' を設定しているため、第2引数が渡されなかった場合でもエラーが発生することなく、自動的に「#」が各単語の先頭に付与されます。このようにデフォルトパラメータを活用すると、関数の柔軟性と安全性が向上します。

実行結果

コンソールには以下のように出力されます。

#hello #stranger, #how #are #you
43hello 43stranger, 43how 43are 43you

まとめ

split・map・join を組み合わせる方法は、文字列内の各単語に対して一括処理を行う際の定番パターンです。今回のような接頭辞の追加だけでなく、単語ごとの置換やハッシュタグ形式への変換など、さまざまな場面に応用できます。ぜひ実際の開発でも活用してみてください。