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

初心者向けにJavaScriptで文字列の指定位置に別の文字列を挿入する方法について現役エンジニアが解説しています。文字列の指定位置に文字を追加するには、インデックスが必要になります。インデックスは配列の要素や文字の場所を表します。sliceメソッドで手前と後を取得して追加文字を挿入してみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

 

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

 

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

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで文字列の指定位置に別の文字列を挿入する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

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] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

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

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

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が守備範囲。

最初に選ぶポケモンは炎タイプ。

 

大石ゆかり

JavaScriptで文字列の指定位置に別の文字列を挿入する方法がよくわかったので良かったです!

田島悠介

ゆかりちゃん、これからも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

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

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