JavaScriptで文字列を操作まとめ(置換・切り出し・検索・数値変換)

2022.08.19

JavaScriptで文字列を操作する記事を6つまとめました。 下記の文字列操作について記載しています。

・文字列を結合する ・文字列を置換する ・文字列を切り出す ・文字列を検索する(指定文字列が含れるか) ・文字列から数値に変換する ・数値から文字列に変換する

文字列を結合する

JavaScriptで文字列を結合する方法です。 文字列を結合するには下記の方法があります。

・プラス演算子(`+`) ・テンプレートリテラル ・配列のjoinメソッド ・文字列のconcatメソッド

プラス演算子を使って文字列を結合する

プラス演算子(+)を使って、文字列を結合する場合は下記のように使用します。

const result = "hello, " + "world!!"
console.log(result) // hello, world!!

result変数に文字列「”hello, “」と、文字列「”world!!”」をプラス演算子で結合して代入しました。 出力すると、resule変数には結合された「hello, world!!」が入っていることが確認できます。

テンプレートリテラルを使って文字列を結合する

テンプレートリテラルを使って結合するには、下記のように使用します。

const text1 = 'hello,'
const text2 = 'world!!'
const result = `${text1} ${text2}`
console.log(result) // hello, world!!

最初にtext1変数とtext2変数に文字列を代入しています。 result変数にテンプレートリテラルを使用して、text1変数とtext2変数を結合した文字列を代入しています。 このように、バッククウォートを使ってドル波括弧「${」から「}」の間に変数を書くと、内容が展開されます。

他のメソッドを使ったり詳細な情報については、下記の記事にまとめたので確認してみてください。 ・JavaScriptで文字列を結合する4つの方法！ [https://codelikes.com/javascript-string-join]

文字列を置換する

JavaScriptで文字列を置換する方法です。 文字列を置換する場合にはreplaceメソッドを使用します。

replaceメソッドを使って文字列を置換する

replaceメソッドを使って、置換するときには下記のように使用します。

console.log("pen painapple apple pen".replace("pen", "")) // ' painapple apple pen'

文字列の「pen painapple apple pen」からreplaceメソッドを呼び出して置換しています。 第1引数に置換対象の文字列、第2引数に置換する文字列を渡します。 今回は「pen」を探して、空文字に変えています。

出力結果は「 painapple apple pen」になります。 文字列の中にはpenが2箇所ありますが、replaceメソッドで文字列を渡した場合は最初の1箇所のみが置換されます。

複数箇所の置換など詳細な情報については、下記の記事にまとめたので確認してみてください。 ・JavaScriptで文字列を置換する方法！(replaceメソッド) [https://codelikes.com/javascript-string-replace]

文字列を切り出す

JavaScriptで文字列を切り出す方法です。 JavaScriptで文字列を切り出すには、下記のどちらかのメソッドを使うと良いです。

・sliceメソッド ・substringメソッド

sliceメソッドを使用して文字列を切り出す

sliceメソッドには切り出しを開始する文字列の位置と、切り出し終わる文字列の位置を渡します。 下記のように使用することができます。

console.log("pen painapple apple pen".slice(4, 13)) // painapple

文字列の「pen painapple apple pen」からpainappleを取り出しています。 文字列は0番目から数えて、4番目から13番目までを取ってくるようにsliceメソッドに渡しました。 結果、「painapple」が出力されます。

substringメソッドを使用して文字列を切り出す

substringメソッドも同じように使用することができます。

console.log("pen painapple apple pen".substring(4, 13)) // painapple

sliceメソッドの時と同じ内容になるので、説明は割愛します。 sliceメソッドとの違いは、マイナス値が指定できないのと、第2引数に開始位置よりも小さい数値を渡せるところです。

さらに詳細な情報については、下記の記事にまとめたので確認してみてください。 ・JavaScriptで文字列を切り出す3つの方法！【わかりやすく解説】 [https://codelikes.com/javascript-string-slice]

文字列を検索する

JavaScriptで文字列を検索して、含むか判定する方法です。 下記のメソッドで含むか判定したり、検索した位置を得ることが可能です。

・includesメソッド ・searchメソッド ・indexOfメソッド

includesメソッドを使って含むかチェックする

includesメソッドを使って、文字列を含むか確認することが可能です。 対象文字列から呼び出して、includesメソッドに検索文字列を指定します。

console.log("apple greap banana painapple".includes("banana")) // true

上記のコードでは、文字列「apple greap banana painapple」からincludesメソッドを呼び出しています。 文字列「banana」を指定して、含むか確認しています。 文字列が含まれる場合にはtrue、含まない場合にはfalseを返します。

他のメソッドを使ったり詳細な情報については、下記の記事にまとめたので確認してみてください。 ・JavaScriptで文字列を含むか検索する方法！メソッド3選！ [https://codelikes.com/javascript-string-search]

文字列から数値に変換する

JavaScriptで文字列を数値に変換する方法です。 下記のオブジェクトと関数を使用することで変換することができます。

・Numberオブジェクト ・parseInt関数 ・parseFloat関数

Numberオブジェクトを使って数値に変換する

Numberオブジェクトを使用して、数値に変換するには下記のように使用します。

const number = "123"
const result = Number(number)

console.log(typeof result) // number
console.log(result) // 123

最初にnumber変数に「123」という文字列を代入しています。 Numberに対して、number変数を渡して変換しています。

変換した結果をresultで受け取りました。 typeofで調べると、数値(number)に変換されていることが確認できました。

他のメソッドを使ったり詳細な情報については、下記の記事にまとめたので確認してみてください。 ・JavaScriptで文字列から数値に変換する3つの方法！ [https://codelikes.com/javascript-string-to-number]

数値から文字列に変換する

上記とは逆に、JavaScriptで数値を文字列に変換する方法です。 Stringオブジェクトなどを使用することで変換することができます。

・Stringオブジェクト ・toStringメソッド ・toFixedメソッド ・文字列結合(+)を使う

Stringオブジェクトを使って文字列に変換する

Stringオブジェクトを使用して、文字列に変換するには下記のように使用します。

const number = 123
const numberText = String(number)

console.log(typeof numberText) // string
console.log(result) // 123

最初にnumber変数に「123」という文字列を代入しています。 Stringに対して、number変数を渡して変換しています。

変換した結果をnumberTextで受け取りました。 typeofで調べると、文字列(string)に変換されていることが確認できました。

他のメソッドを使ったり詳細な情報については、下記の記事にまとめたので確認してみてください。 ・JavaScriptで数値から文字列に変換する4つの方法！ [https://codelikes.com/javascript-number-to-string]

コメント