JavaScriptで文字列の指定位置に別の文字列を挿入する方法を現役エンジニアが解説【初心者向け】

JavaScriptで文字列の指定位置に別の文字列を挿入する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事を見てみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

JavaScriptで文字列の指定位置に別の文字列を挿入するために必要な情報

JavaScriptで文字列の指定位置に別の文字列を挿入するためには、インデックスを取得する必要があります。

2番目の文字はインデックス1と2の間、3番目の文字はインデックス2と3の間、n番目の文字はインデックスn-1とnの間です。

言い換えれば、インデックス1は最初と2番目の文字の間にある状態です。

つまり、インデックス2は2番目と3番目の文字の間、インデックスnはn番目とn+1番目の文字の間です。

 

JavaScriptで文字列の指定位置に別の文字列を挿入する方法

JavaScriptで文字列の指定位置に別の文字列を挿入するメソッドがありません。

そのため、まずは挿入する文字をどの文字列の間に挿入するのかを決めます。

次に、その文字の間のインデックスを求めましょう。

例えば、2番目と3番目の文字の間に挿入するとしたら、文字の間のインデックスは2です。

挿入する位置（インデックス）を求めたら、文字列の最初からそのインデックスまでをsliceメソッドを使って切り出しましょう。

仮に、この文字列の最初からインデックスまでを切り出してできた文字列をAとします。

その切り出した文字列の後ろに、挿入する文字をくっつけましょう。

 

そして、挿入する文字をBとすると、現在の形はA+Bという状態です。

最後に、その後ろに元々の文字列のうち挿入する位置から最後の文字までをsliceメソッドで切り出す必要があります。

また、この元々の文字列のうち挿入する位置から最後の文字までを切り出した文字列をCとしましょう。

文字列を挿入した結果はA+B+Cという状態になります。

元々の文字列のうち、最初の文字から挿入する位置の直前までの文字+挿入する文字+挿入する位置の直後の文字から最後の文字までがプラスされることで挿入が完了します。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

文章で書くととても分かりにくいため、実際にコードを書いてみましょう。

「プログラミング学習」という文字列に「の」を挿入して「プログラミングの学習」としてみます。

const str = 'プログラミング学習'
const a = str.slice(0, 7)
const b = 'の'
const c = str.slice(7)
console.log(a + b + c)

これで、コンソールに「プログラミングの学習」と表示されます。

何度もこの処理をする場合は、挿入される文字列、挿入する文字、挿入する位置（インデックス）を引数に持つ関数を作り、コードを効率化しましょう。

執筆してくれたメンター

メンター久保田 Webシステム開発が中心のシステムエンジニア。 HTML、CSS、JavaScript（React、Vue.js）、PHP、Javaが守備範囲。 最初に選ぶポケモンは炎タイプ。

 

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。