JavaScript入門 文字列の基本操作(比較/検索/置換/削除/分割/連結)

スポンサーリンク

JavaScript

前回の記事(JavaScript入門 switch文を使った条件分岐の方法)では、JavaScriptでswitch文を使って条件分岐する方法を見てきました。
if文と併せて、うまく使い分けができるようになると理想的です。

今回は、JavaScriptの文字列基本操作について確認します。
文字列の作成方法から始まり、文字列を検索・置換・比較・連結などを行う方法について解説していきます。
文字列操作は比較的よく行いますので、今のうちにある程度覚えておくとお得ですよ。

スポンサーリンク

文字列の作成方法

文字列の作成方法は、大きく分けると2通りあります。
1つは文字列を直接代入する方法(1)、もう1つはStringオブジェクトを利用する方法(2)です。

// 直接代入(1)
var str1 = "Hello World!";

// Stringオブジェクト(2)
var str2 = new String("Hello World!");

文字列を作成する際によく使われるのは、文字列を直接代入する方法です。
文字列は、シングルクォート(”)またはダブルクォート(””)で囲みます。

(1)と(2)の違いは、それぞれの型が異なることです。
(1)の方法ではString型になりますが、(2)の方法ではObject型になります。

文字列のエスケープシーケンス

次に、エスケープシーケンスについて見ていきます。
例えば、「I’m a singer.」という文字列を作りたいとします。
この時、以下ののように書くとエラーになります。

var s = 'I'm a singer.';

この例では、文字列をシングルクォートで囲んでいますよね。
ですが、この文字列中「I’m」に同じシングルクォートがあるので、誤認識を起こしてしまうのです。

それを避けるためには、シングルクォートの前に「\」(バックスラッシュ)を入れます。
つまり、以下のように書きます。

var s = 'I\'m a singer.';

ちなみに、「\n」と入力すると改行になります。
改行は比較的よく使いますので覚えておくと良いでしょう。

文字列の参照

JavaScriptでは、文字列は配列のように扱うことができます。
配列というのは、同じ型の複数の値をまとめて扱うもののことを言います。

例えば、「Hello」という文字列があるとします。
これは配列の「[‘H’,’e’,’l’,’l’,’o’]」として扱えるということです。

それでは、サンプルプログラムを見てみましょう。

var h = 'Hello';
document.write(h[0]);

このサンプルプログラムでは、0番目の文字を指定しています。
そのため、’Hello’の0番目(インデックスは0から始まる)の文字、’H’が表示されます。

H

つまり、これを利用すれば、文字列の任意の位置の文字が取得できるということです。
文字列の参照は結構使いますので、よく覚えておきましょう。

ちなみに、文字列の文字数は「length」で取得できます。
「Hello」という文字列で試してみると、文字数の5が返ってきます。

var h = 'Hello';
document.write(h.length); // => 5

文字列の比較

文字列の比較は、基本的には「===」(厳密等価比較演算子)を使って行います。
これを使うと、ある文字列とある文字列が一致するかどうかを調べることができます。
左右の文字列が同じ場合には「true」、違う場合には「false」が返ってきます。

var result = ('Hello' === 'Hello');
document.write(result); // => true

この比較方法を使うと、例えばユーザー入力された文字列が、指定の文字列と一致するかどうかを確認できます。

var user = 'ユーザーが入力した文字列';
var str = '指定の文字列';
if(answer === str) {
  // 文字列が同じ場合の処理
} else {
  // 文字列が違う場合の処理
}

文字列の検索(indexOf)

ある文字列の中から、任意の文字を検索するには検索をする必要がありますよね。
この検索を行うためのメソッドが、JavaScriptではあらかじめ用意されています。

文字列の検索でよく使うのが「indexOf」メソッドです。
これは文字列中に、指定した任意の文字列を含むかどうかを調べ、その位置(インデックス)を返すメソッドです。
指定した文字列が見つからない場合、「-1」を返します。

サンプルプログラムを見たほうが早いので、確認してみましょう。
これは、文字列「Hello」の中に文字「o」があるかどうかを調べています。
そして、その位置を表示させています。
この場合、4が表示されます。

var h = 'Hello';
var index = h.indexOf('o');
document.write(index); // => 4

文字列の置換(replace)

文字列の置換でよく使うのは「replace」メソッドです。
基本的な使い方はこちら。

var str = '文字列';
str.replace('対象文字列', '置換文字列');

replaceメソッドは、文字列の中から対象文字列を検索します。
そして、対象文字列が見つかった場合に置換文字列に置換してくれます。

例えば、以下のようなサンプルプログラムがあるとすると…。
「晴れ」という文字列を「雨」という文字列に置換します。

var str = '今日の天気は晴れです。';
var result = str.replace('晴れ', '雨');
document.write(result)
今日の天気は雨です。

文字列の削除

文字列の削除で最もお手軽なのは、replaceメソッドを使う方法です。
replaceメソッドで、対象文字列を空文字に置換してしまいます。

var text = '今日は良い天気ですね!';
var result = text.replace('良い', '');
document.write(result);
今日は天気ですね!

文字列の分割(split)

文字列の分割方法には色々ありますが、splitメソッドを比較的よく使うと思います。
splitメソッドは、文字列を指定した文字列(正規表現)で分割します。

例えば、カンマ(,)区切りになっている文字列を、カンマで分割したいときには以下のようにします。
比較的よくやるパターンです。

var text = '4,7,1,5,2';
var result = text.split(','); // => [4,7,1,5,2]

splitメソッドは正規表現でも分割できます。
例えば、改行文字で分割したい場合には、以下のようにします。

var text = 'Hello, everyone!\nMy name is Shingo Suzuki.';
var result = text.split(/\n/); // => ["Hello, everyone!", "My name is Shingo Suzuki."]

正規表現を使うと、より複雑な分割ができるようになりますが…。
それについては高度な内容になりますので、ここではとりあえずこれくらいにしておきます。

文字列の連結

文字列の連結について見ていきます。
文字列の連結とは、ある文字列を別の文字列とつなげて新しい文字列を作ることを言います。

基本的な文字列の連結は、「+」を使った方法を使うことが多いです。
文字列と文字列の間に「+」をはさみます。

var text1 = 'Hello';
var text2 = 'World';
var result = text1 + text2;
document.write(result);
Hello World

まとめ

今回の記事では、文字列の作成方法と、文字列の基本操作について確認してみました。
とりあえず、比較的よく使いそうな操作とメソッドを挙げてみましたが…。
他にもまだまだたくさんの文字列操作(メソッド)が存在します。
分からなかったら、その都度検索して覚えていくと良いですね。

次回は、JavaScriptの関数について見ていきます。
効率的なプログラムを組むために、関数の知識は必須ですよ。
できるだけ分かりやすく解説する予定ですので…。
ぜひ楽しみにしていてくださいね。

前回 ≫ JavaScript入門 switch文を使った条件分岐の方法
次回 ≫ JavaScript入門 関数(function)の定義方法と使い方

コメント