format_list_bulleted
【JavaScript】文字列操作について解説(検索、比較、結合、置換、分割、型変換)
最終更新日時:2020-05-03 12:52:12



JavaScriptでの基本のデータ型であるstring型のラッパーオブジェクトであるStringオブジェクトは文字列に関するメソッドを多数提供しています。これらを用いることで文字列の検索や置換、分割などの文字列操作を実現できます。本記事ではこれらの文字列の扱いについて解説します! 正規表現を用いるmatchメソッド、replaceメソッド、splitメソッドについては「JavaScriptの正規表現(RegExp)の書き方・使い方について解説」も参考にしてみてください!

文字列(Stringオブジェクト)とは?

JavaScriptではいくつかの型を用意しています。その中でも文字列型を扱うためのStringオブジェクトは文字列の検索や置換などの文字列操作を行うための様々なメソッドと提供しています。また、Stringオブジェクト以外に文字列型のプリミティブ値はラッパーオブジェクトであるStringオブジェクトのメソッドを用いることができます。

文字列を生成する

文字列を生成するためにはリテラルによる表現とString関数による生成そしてStringコンストラクタによって生成する方法があります。このうち、リテラルによる表現とString関数による生成は基本型(プリミティブ値)の文字列、コンストラクタによるオブジェクト型の文字列を生成することになります。

文字列リテラル(プリミティブ値)

文字列リテラルを使用して文字列を表現することができます。ご存知の方も多いかと思いますが、シングルクォーテーション(‘’)またはダブルクォーテーション(“”)で値を囲むリテラルです。

let hoge = 'ホゲホゲ'
let fuga = "ふがふが"

この際に注意しなければならないのは、シングルクォーテーション内にはシングルクォーテーションが記述できない点です。ダブルクォーテーション内には記述できるのでこのような場合はダブルクォーテーションを活用しましょう。

テンプレートリテラル(プリミティブ値)

バッククォーテーションを用いることでクォーテーション内でJavaScriptの変数の値を参照することができます。

let hoge = 'ホゲホゲ'
let fuga = `${hoge}と言います`
console.log(fuga)

(Google Chrome Console)
"ホゲホゲと言います"

String()関数(プリミティブ値)

String関数を用いることで意図的に引数を文字列として表現することができます。この際に生成される値はstring型になります。

let hoge = String(123)

上のように書きます。この際にhogeの値はString型になります。

Stringコンストラクタ(オブジェクト型)

Stringオブジェクトのコンストラクタを利用してオブジェクト型の文字列を生成することができます。書き方は以下の通りです。

let hoge = new String(123)

この際にhogeはオブジェクト型になります。

typeof hoge === "object" //true

文字列を検索・検出・抽出する(*は正規表現を利用)

文字列の中から特定の文字列を検索したい場合に利用できるStringオブジェクトのメソッドについて紹介します。(*が先頭についているものは正規表現が必要となるメソッドです。)正規表現を詳しく学習したい方は「JavaScriptの正規表現(RegExp)の書き方・使い方について解説」を参照してみてください!

文字列の検索や抽出には場合に応じたいくつかのメソッドがあるので次の表も参考にしてみてください。

オブジェクト

メソッド名・引数([]内は任意)

戻り値

説明

String

indexOf(keyword[,index])

インデックス

文字列(keyword)にマッチした箇所のインデックスの取得

String

match(regexp)

マッチの結果の配列

正規表現(regexp)にマッチした結果を配列で取得

String

search(regexp)

インデックス

正規表現(regexp)にマッチした箇所のインデックスの取得

RegExp

test(regexp)

真偽値

正規表現(regexp)にマッチした文字列があるかどうかを真偽値で判定

String

charAt(index)

1文字

指定したインデックス(index)の1文字を抽出

String

substr(index[,length])

文字列

指定したインデックス(index)から指定した文字数(length)の文字列を抽出

String

substring(index[,index])

文字列

指定したインデックス間(index,index)の文字列を抽出

String

slice(index[,index])

文字列

指定したインデックス間(index,index)の文字列を抽出

indexOf(文字列にマッチした箇所のインデックスの取得)

indexOfメソッドは引数の文字列にはじめにマッチした箇所のインデックスを返します。

検索対象の文字列.indexOf(インデックス[,開始インデックス])

インデックスに該当する文字がない場合は-1を返します。また、第二引数で検索を開始するインデックスの指定ができます。

*match(正規表現にマッチした結果を配列で取得)

検索対象の文字列.match("正規表現")

matchメソッドは正規表現に含まれるgフラグの有無によって異なる配列を返します。gフラグなどの内容については正規表現について学習する必要があるため「JavaScriptの正規表現(RegExp)の書き方・使い方について解説」を参照してみましょう。

gフラグがある場合は正規表現にマッチした全ての文字列を配列にして返します。

gフラグがない場合ははじめに正規表現にマッチした文字列に加えて、groups(サブマッチ文字列)、index(最初にマッチした文字列のインデックス)、input(検索対象の文字列)を配列のキーにして返します。

*search(正規表現にマッチした箇所のインデックスの取得)

検索対象の文字列.search("正規表現")

searchメソッドは正規表現で表現された文字列パターンがはじめにマッチした箇所のインデックスを返します。

*RegExp.prototype.test(正規表現にマッチした文字列があるか検出)

RegExpオブジェクト.test(検索対象の文字列)

RegExpオブジェクトのtestメソッドでは正規表現にマッチした文字列があるかどうかを判定しある場合はtrueをない場合はfalseを返します。

charAt(指定したインデックスの1文字を抽出)

検索対象の文字列.charAt(指定するインデックス)

charAtメソッドは指定したインデックスに該当する1文字を返します。インデックスが該当しない場合は空文字を返します。

substr(指定したインデックスから指定した文字数の文字列を抽出)

*substrメソッドはJavaScriptでは将来的に削除される可能性のある非推奨のメソッドであるため、使用する際は注意してください。

抽出対象の文字列.substr(開始するインデックス[,抽出する文字の長さ])

substrメソッドは開始するインデックスと抽出する文字の長さを指定して文字列を抽出することができます。文字の長さが指定されていない場合は開始するインデックスから全ての文字列が抽出されます。

substring(指定したインデックス間の文字列を抽出)

抽出対象の文字列.substring(開始するインデックス[,終了するインデックス])

substringメソッドは開始するインデックスと終了するインデックスを指定して、文字列を抽出して返します。終了するインデックスが指定されていない場合は開始するインデックスから全ての文字列が抽出されます。

slice(指定したインデックス間の文字列を抽出)

抽出対象の文字列.slice(開始するインデックス[,終了するインデックス])

sliceメソッドは開始するインデックスと終了するインデックスを指定して、文字列を抽出して返します。終了するインデックスが指定されていない場合は開始するインデックスから全ての文字列が抽出されます。

substringとsliceの違い

3.7項で紹介したsubstringメソッドと3.8項で紹介したsliceメソッドは基本的な機能は一緒ですが、開始するインデックスと終了するインデックスの値によって異なる振る舞いをします。

開始するインデックス>終了するインデックスの場合

substringメソッドの場合、次のように処理します。

抽出対象の文字列.substring(終了するインデックス,開始するインデックス)

sliceメソッドの場合、空文字を返します。

インデックスが負の場合

substringメソッドの場合、0として扱います。

sliceメソッドの場合、文字列の末尾からのインデックスとして扱います。例えば以下のような実行結果となります。

'JavaScriptのstring型の扱い'.substring(3,-2) //戻り値:"Jav"
'JavaScriptのstring型の扱い'.slice(3,-2) //戻り値:"aScriptのstring型の"

substring(3,-2)はsubstring(0,3)として、slice(3,-2)はslice(3,18)として扱われます。

文字列を比較する

文字列を比較して真偽値に変換する方法について紹介します。等価演算子(==)や同値演算子(===)で評価する方法とRegExpオブジェクトのtestメソッドを用いる方法があります。testメソッドについては部分一致についても比較ができるので包括的な比較機能を提供しますが、正規表現について学習する必要があります。正規表現について学習したい方は「JavaScriptの正規表現(RegExp)の書き方・使い方について解説」がおすすめです。

==(文字列の完全一致)

等価演算子である==を用いて文字列同士の値を比較することができます。

"hoge" == "hoge" //true
"hoge" == "fuga" //false

文字列の値が等しければ文字列の方が異なっていてもtrueを返答します。したがって以下のような場合でもtrueを返します。

hoge = 123 //number型
fuga = "123" //string型
hoge == fuga //true

===(文字列と型の完全一致)

同値演算子である===を用いて文字列同士の値と型を比較することができます。したがって等価演算子(==)でfalseのものは同値演算子でもfalseになります。さらに、値は同じでも型が異なる場合はfalseになります。

hoge_1 = "hoge" //string型で宣言
hoge_2 = new String("hoge") //object型のStringオブジェクトで定義
hoge_1 == hoge_2 //true
hoge_1 === hoge_2 //false

RegExp.prototype.test(正規表現に一致する文字列があるか検出)

RegExpオブジェクト.test(検索対象の文字列)

RegExpオブジェクトのtestメソッドでは正規表現にマッチした文字列があるかどうかを判定しある場合はtrueをない場合はfalseを返します。==や===と異なり部分一致である場合も検出することができます。

文字列を結合・連結する

文字列を結合・連結する場合には加算演算子(+)を用いて文字列同士を結合する方法やconcatメソッドを用いて結合する方法があります。

+(文字列同士の結合)

加算演算子を用いて文字列同士を結合することができます。

"hoge" + "hoge" //"hogehoge"

また、number型やboolean型の値と結合した場合全て文字列として扱われます。

number = 123
string = "hoge"
number + string //"123hoge"

concat(文字列後方への連結)

concatメソッドを用いることで文字列を文字列の後ろに連結させることができます。

対象となる文字列.concat(連結する文字列[,連結する文字列...])

複数の文字列を対象の文字列に連結させることもできます。

greeting = "Hello "
name = "ELOOP "
msg = "thank you!"
greeting.concat(name,msg) //"Hello ELOOP thank you!"

文字列を置換するreplaceメソッド(指定した文字列を他の文字列に置換)

文字列の特定の文字を他の文字に置換する場合にはreplaceメソッドを用いて正規表現で文字列を検出して他の文字に置換する方法があります。同様にして文字列の削除も行うことができます。

置換対象の文字列.replace("正規表現","挿入する文字列")

正規表現で置換部分の検索し、そこに挿入する文字列が入ります。置換後の文字列が戻り値として返ってきます。正規表現やreplaceメソッドについて学習したい方は「JavaScriptの正規表現(RegExp)の書き方・使い方について解説」がおすすめです。

文字列を分割するsplitメソッド(指定した文字列で文字列を分割し配列を生成)

文字列を特定の文字や文字パターンで分割する場合にはsplitメソッドを用いて特定の文字で文字列を分割し配列形式にする方法があります。文字列の検索には文字列を使用する方法と正規表現を用いる方法があります。

分割対象の文字列.split('区切りの対象となる文字列'[,限度数])

区切りの対象となる文字列を第一引数で指定して、任意の第二引数では分割数の限度数を指定できます。

msg = "Hello ELOOP thank you!"
words = msg.split(" ") //スペースで分割
words[2] //"thank"

第一引数では正規表現をRegExpオブジェクトとして代入してより広範なパターンの分割を実装することができます。「JavaScriptの正規表現(RegExp)の書き方・使い方について解説」を参照しながら学習するのもおすすめです。

文字列をnumber型に変換する

四則演算などを行うために文字列をnumber型に変換をする場合などがありますが、変換にはいくつかの方法があります。

Number(number型への変換)

Number型のプリミティブ値を生成する際にはNumber()を使いましょう。一般的な型変換ではこちらを使います。

Number(変換する文字列)

この際に数値に変換できない値を入れるとNaN(Not-aNumber)を返すため注意が必要です。

new Number(Numberオブジェクトへの変換)

8.1項と同様にNumberオブジェクトを生成する際にはNumberオブジェクトのコンストラクタを用います。

new Number(変換する文字列)

ただし数値に変更できない値を引数に入れるとNaNを返すことに注意が必要です。また、Numberオブジェクトは同値演算子を用いる際に注意が必要です。

num = new Number("123")
num === 123 //false

その他の方法

ハック的な方法で文字列をnumber型に変更することも可能です。

num = "123"
num - 0 //123
num * 1 //123
num / 1 //123
num + 0 //"1230"

ただし+を用いる場合には5.1項の文字列の連結が適用されてしまう点に注意が必要です。

他の型を文字列に変換する

Stringオブジェクトのメソッドを用いるために文字列型への変換をする場合などがありますが、いくつかの方法があります。

String(string型への変換)

String(変換したい値)

こちらを用いることで文字列へ変換することができます。オブジェクトなどを代入しても変換が可能です。

String(123) //"123"
String(false) //"false"
String(NaN) //"NaN
String([1,2,3]) //"1,2,3"
String({key:"hoge"}) //"[object Object]"

new String(Stringオブジェクトへの変換)

new String(変換したい値)

こちらを用いることで文字列オブジェクトへ変換することができます。こちらもオブジェクトなどのあらゆる値を引数に取ることができます。

Number.prototype.toString(number型からStringオブジェクトへの変換)

number型に関してはtoStringメソッドを用いることで文字列型への変換を行うことができます。

num = Number("123")
num.toString() //"123"

大文字小文字の変換をする

大文字と小文字を変換することもできます。

toLowerCase(小文字への変換)

toLowerCaseメソッドを用いることで文字列全てを小文字に変換することができます。英語の大文字以外の文字に対しては処理を行いません。

"Hoge".toLowerCase() //"hoge"
"ほげ".toLowerCase() //"ほげ"

メソッドなので必ず()を付けなければいけないことに注意しましょう。

toUpperCase(大文字への変換)

toUpperCaseメソッドを用いることで文字列全てを大文字に変換することができます。英語の小文字以外の文字に対しては処理を行いません。

"Hoge".toUpperCase() //"HOGE"
"ほげ".toUpperCase() //"ほげ"

こちらもメソッドなので必ず()を付けなければいけないことに注意しましょう。

この記事のまとめ

JavaScriptの文字列操作について説明しました!最後に記事の要点をまとめてみましょう。

  • 文字列は文字列型のプリミティブ値と文字列オブジェクトがある
  • 文字列型のプリミティブ値はリテラル表現かString()関数で生成できる
  • 文字列オブジェクトは文字列オブジェクトのコンストラクタで生成できる
  • 文字列オブジェクトのメソッドを利用することで文字列の検索や置換、分割などの文字列操作を行うことができる
  • より広範な文字列操作には正規表現を用いる場合がある

JavaScriptの文字列操作を是非活用してみましょう。