JavaScriptのStringオブジェクトの使い方を解説

Stringオブジェクトとは文字列を扱うためのモノです。

「JavaScriptのオブジェクトとは」の”文字列”でも話ましたが、文字列の操作はもっと色んなことが出来るので深堀りして解説します。

それでも全部というのはちょっと多すぎるので(笑)、僕が使ってたことがあるものだけをピックアップしてお伝えします。

文字列オブジェクトの宣言

おさらいも兼ねますが、まずは宣言から。

文字列はStringクラスのオブジェクトです。

宣言は以下のように書きます。

var str = new String('りんご');

1	var str = new String('りんご');

Stringも簡易的に宣言でき、下記のように書くのが一般的です。

var str = 'りんご';

1	var str = 'りんご';

シングルコーテーションとダブルコーテーションの違い

本当は”クォーテーション”なんでしょうかね？

文字列の宣言は、以下の２つがあります。

var str = 'りんご';

1	var str = 'りんご';

var str = "りんご";

1	var str = "りんご";

この２つの違いがお分かりでしょうか？

文字列を囲む””の違いです。

ではシングルコーテーションとダブルコーテーションの違いってなんでしょう？

JavaScriptの場合は、シングルコーテーションの中にはそのままシングルコーテーションは書けなく、ダブルコーテーションの中にはそのままダブルコーテーションが書けないというものです。

例えば、

var str = 'りんごは英語で'apple'';

1	var str = 'りんごは英語で'apple'';

のような書き方は出来ないということです。

‘りんごは英語で’までで1つの文字列になってしまいます。

この場合下のように書けば問題ないです。

var str = 'りんごは英語で"apple"';

1	var str = 'りんごは英語で"apple"';

シングルコーテーションの中にはそのままシングルコーテーションを書く場合はエスケープというものを使います。

var str = 'りんごは英語で\'apple\'';

1	var str = 'りんごは英語で\'apple\'';

ダブルコーテーションの場合も同じです。

var str = "りんごは英語で\"apple\"";

1	var str = "りんごは英語で\"apple\"";

エスケープには \ (バックスラッシュ)をコーテーションの前につけます。

※バックスラッシュと￥(の半角)マークは同じです。

シングル、ダブルに関係なく、そのまま表示出来ない文字があります。

エスケープ文字

エスケープ文字の一覧です。

他にもありますが、これだけ知っていれば大丈夫です。

エスケープ文字	意味	宣言	表示
\t	タブ	var str = “りんご\tみかん”;	りんご(ここにタブ)みかん
\n	改行	var str = “りんご\nみかん”;	りんごみかん
\’	シングルコーテーション	var str = “りんご\’みかん”;	りんご’みかん
\”	ダブルコーテーション	var str = “りんご\”みかん”;	りんご”みかん
\\	バックスラッシュ	var str = “りんご\\みかん”;	りんご\みかん

文字列の連結

文字列の連結は + を使って行います。

文字列＋文字列の場合

var str = "りんご" + "みかん"; // りんごみかん
var str = "りんご" + 'みかん'; // りんごみかん

1 2	var str = "りんご" + "みかん"; // りんごみかん var str = "りんご" + 'みかん'; // りんごみかん

文字列＋数値

var str = "りんご" + 123; // りんご123

1	var str = "りんご" + 123; // りんご123

文字列＋boolean

var str = "りんご" + true; // りんごtrue

1	var str = "りんご" + true; // りんごtrue

文字列の文字数取得 [length]

var str = "りんごみかん";
var length = str.length;

1 2	var str = "りんごみかん"; var length = str.length;

変数の後ろに .length をつけると文字数が取れます。

上の例だと 6 という数値が返ってきます。

文字列の検索 indexOf()

indexOf() を使うことで文字列の検索が出来ます。

検索したい文字列またはその変数.indexOf(‘検索したい文字列‘);

検索したい文字列は1文字でも複数文字でも可能で、シングルコーテーションでもダブルコーテーションでも構いません。

文字が見つからない場合は -1 を返します。

var str = "りんごみかん";
var i = str.indexOf('あ');

1 2	var str = "りんごみかん"; var i = str.indexOf('あ');

上の場合、i には -1 が格納されます。

文字が見つかった場合は1文字目を0とし、見つかった文字のインデックスを返します。

var str = "りんごみかん";
var i = str.indexOf('み');

1 2	var str = "りんごみかん"; var i = str.indexOf('み');

上の場合、i には 3 が格納されます。

複数文字を検索し見つかった場合は、検索した文字の最初の文字のインデックスを返します。

var str = "りんごみかん";
var i = str.indexOf('みかん');

1 2	var str = "りんごみかん"; var i = str.indexOf('みかん');

上の場合、i には 3 が格納されます。

検索した文字が複数見つかった場合には最初のインデックスを返します。

var str = "りんごみかん";
var i = str.indexOf('ん');

1 2	var str = "りんごみかん"; var i = str.indexOf('ん');

上の場合、i には 1 が格納されます。

文字列の置換

文字列の置換には replace() を使います。

str.replace(置換対象の文字列, 置換する文字列);

例えば、”こんにちは。**さん” という文字列の**の部分を”田中”に変えたいとします。

その場合は下記のように書きます。

var str = "こんにちは。**さん";
var res = str.replace('**', '田中');

1 2	var str = "こんにちは。さん"; var res = str.replace('', '田中');

上の res には “こんにちは。田中さん” が入ります。

部分的に文字を削除したい場合は、置換する文字列に空文字を入れれば可能です。

var str = "こんにちは。**さん";
var res = str.replace('**さん', '');

1 2	var str = "こんにちは。さん"; var res = str.replace('さん', '');

上の res には “こんにちは。” が入ります。

置換対象の文字列が複数ある場合には最初に見つかったものだけが置換されます。

var str = "こんにちは。田中さん。こんにちは";
var res = str.replace('こんにちは', 'おはようございます');

1 2	var str = "こんにちは。田中さん。こんにちは"; var res = str.replace('こんにちは', 'おはようございます');

上の res には “おはようございます。田中さん。こんにちは” が入ります。

文字列の一部抜き出し

文字列の中から部分的に抜き出す方法です。

JavaScriptには substring() と substr() があります。

substring()

substring(開始位置, [終了位置])

開始位置, 終了位置はそれぞれ文字列のインデックスを指定します。1文字目が0になるということです。

開始位置はその文字も含みます。

終了位置はその文字の手前までになります。

終了位置は省略することも出来、省略すると最後までになります。

var str = "こんにちは。田中さん。こんにちは";
var res = str.substring(6, 10);

1 2	var str = "こんにちは。田中さん。こんにちは"; var res = str.substring(6, 10);

上の res には “田中さん” が入り、”田中さん”の後ろの”。”がインデックス10で処理結果には含まれません。

substr()

substr(開始位置, [文字数])

開始位置は、substring()同様文字列のインデックスを指定します。

substr()は、終了位置を指定せず文字数を指定します。

var str = "こんにちは。田中さん。こんにちは";
var res = str.substr(6, 5);

1 2	var str = "こんにちは。田中さん。こんにちは"; var res = str.substr(6, 5);

上の res には “田中さん。” が入ります。

ちょっと応用

“こんにちは。田中さん。”という文字列に対し、”こんにちは。”だけ取得したい場合は下のように書けます。

var str = "こんにちは。田中さん。";
var i = str.indexOf('。');
var res = str.substring(0, i + 1);

var str = "こんにちは。田中さん。";

var i = str.indexOf('。');

var res = str.substring(0, i + 1);

上の res には “こんにちは。” が入ります。

最初の”。”の位置を検索し、そのインデックス+1 まで文字列を取得するというものです。

逆に”田中さん”だけ欲しい場合もあると思います。

その場合には以下のように書きます。

var str = "こんにちは。田中さん。";
var i = str.indexOf('。');
var res = str.substring(i + 1, str.length - 1);

var str = "こんにちは。田中さん。";

var i = str.indexOf('。');

var res = str.substring(i + 1, str.length - 1);

上の res には “田中さん” が入ります。

最初の”。”の位置を検索し、そのインデックス+1から後ろの値を取得しますが、最後の”。”が邪魔です。

なので文字列の長さを取得し、”。”の分-1して終了位置を指定します。

文字列を分割して配列で取得

JavaScriptでCSVデータを扱うかは分かりませんが、例えば下のようなデータがあるとします。

“田中,東京,29”

名前、住所、年齢がカンマ(,)区切りで文字列になっているものです。

これをそれぞれ分解して変数に格納したいとします。

そのためには split() を使います。

var str = "田中,東京,29";
var infoArray = str.split(",");
var name = infoArray[0];
var addres = infoArray[1];
var age = infoArray[2];

var str = "田中,東京,29";

var infoArray = str.split(",");

var name = infoArray[0];

var addres = infoArray[1];

var age = infoArray[2];

name には、”田中”

addres には、”東京”

age には、”29″

が入ります。

文字列の比較

文字列の比較はちょっとややこしいです。

まず、文字列の比較には == と === があります。

== は値が同じかどうかを比較します。

=== は値と型も比較します。

文字列で宣言しても数字の文字列の場合は、== だと true になり === だと false になります。

var str1 = "100";
var str2 = 100;
alert(str1 == str2); // true
alert(str1 === str2); // false

var str1 = "100";

var str2 = 100;

alert(str1 == str2); // true

alert(str1 === str2); // false

文字列同士でもシングルコーテーションとダブルコーテーションの比較の場合はどうでしょうか？

new String で宣言したものとの比較はどうでしょうか？

var str1 = "りんご";
var str2 = "りんご";
var str3 = 'りんご';
var str4 = new String('りんご');

alert(str1 == str2); // true
alert(str2 == str3); // true
alert(str1 == str4); // true
alert(str1 === str2); // true
alert(str2 === str3); // true
alert(str1 === str4); // false

var str1 = "りんご";

var str2 = "りんご";

var str3 = 'りんご';

var str4 = new String('りんご');

alert(str1 == str2); // true

alert(str2 == str3); // true

alert(str1 == str4); // true

alert(str1 === str2); // true

alert(str2 === str3); // true

alert(str1 === str4); // false

結果は、シングルコーテーションとダブルコーテーションの違いは無いようです。

4行目の new 演算子を使って宣言した場合は、== ならば true ですが、=== は false になります。

まとめ

JavaScriptの文字列の操作についてたくさん書きました。

今回紹介した以外のものもありますが、いったんこれだけ分かっていれば大抵のことは出来ます。

細かい部分ですのでもし不明点があればご質問ください。

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

JavaScriptのStringオブジェクトの使い方を解説

文字列オブジェクトの宣言

シングルコーテーションとダブルコーテーションの違い

エスケープ文字

文字列の連結

文字列の文字数取得 [length]

文字列の検索 indexOf()

文字列の置換

文字列の一部抜き出し

substring()

substr()

ちょっと応用

文字列を分割して配列で取得

文字列の比較

まとめ

コメントを残すコメントをキャンセル

むねひろ

最新の投稿

カテゴリー

文字列オブジェクトの宣言

シングルコーテーションとダブルコーテーションの違い

エスケープ文字

文字列の連結

文字列の文字数取得 [length]

文字列の検索 indexOf()

文字列の置換

文字列の一部抜き出し

substring()

substr()

ちょっと応用

文字列を分割して配列で取得

文字列の比較

まとめ

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

htmlのbuttonで画面遷移する方法

jQueryでHTMLやテキストを変更・削除する方法

jQueryでクラス属性にクラスを追加・削除する方法

jQueryで値が数値かどうかをチェックする方法

jQueryでサイドメニューを縦にスライドして折りたたみする方法

jQueryでradioの値を取得したりチェックする方法

DOM (Document Object Model)とは

JavaScriptの演算子の一覧と解説

むねひろ

最新の投稿

カテゴリー

コメントを残すコメントをキャンセル