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つの方法！
文字列を置換する
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メソッド)
文字列を切り出す
JavaScriptで文字列を切り出す方法です。
JavaScriptで文字列を切り出すには、下記のどちらかのメソッドを使うと良いです。
・substringメソッド
sliceメソッドを使用して文字列を切り出す
spliceメソッドには切り出しを開始する文字列の位置と、切り出し終わる文字列の位置を渡します。
下記のように使用することができます。
console.log("pen painapple apple pen".slice(4, 13)) // painapple
文字列の「pen painapple apple pen」からpainappleを取り出しています。
文字列は0番目から数えて、4番目から13番目までを取ってくるようにspliceメソッドに渡しました。
結果、「painapple」が出力されます。
substringメソッドを使用して文字列を切り出す
substringメソッドも同じように使用することができます。
console.log("pen painapple apple pen".substring(4, 13)) // painapple
sliceメソッドの時と同じ内容になるので、説明は割愛します。
sliceメソッドとの違いは、マイナス値が指定できないのと、第2引数に開始位置よりも小さい数値を渡せるところです。
・JavaScriptで文字列を切り出す3つの方法！【わかりやすく解説】
文字列を検索する
JavaScriptで文字列を検索して、含むか判定する方法です。
下記のメソッドで含むか判定したり、検索した位置を得ることが可能です。
・searchメソッド
・indexOfメソッド
includesメソッドを使って含むかチェックする
includesメソッドを使って、文字列を含むか確認することが可能です。
対象文字列から呼び出して、includesメソッドに検索文字列を指定します。
console.log("apple greap banana painapple".includes("banana")) // true
上記のコードでは、文字列「apple greap banana painapple」からincludesメソッドを呼び出しています。
文字列「banana」を指定して、含むか確認しています。
文字列が含まれる場合にはtrue、含まない場合にはfalseを返します。
・JavaScriptで文字列を含むか検索する方法！メソッド3選！
文字列から数値に変換する
JavaScriptで文字列を数値に変換する方法です。
下記のオブジェクトと関数を使用することで変換することができます。
・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つの方法！
数値から文字列に変換する
上記とは逆に、JavaScriptで数値を文字列に変換する方法です。
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)に変換されていることが確認できました。
コメント