JavaScriptで文字を抜き出す方法を解説

HOME
更新日:2017.03.02
HOMEJavaScript入門 > 文字を抜き出す

文字を抜き出す

このページでは、文字列の中から文字を抜き出す3種類の方法について考えます。 指定位置から1文字だけ抜き出す、文字数を指定して抜き出す、範囲指定して抜き出す方法です。

文字を抜き出すスクリプト

文字を切り出す簡単なスクリプトを見てみましょう。 以下のコードをHTMLのBODY内に記入してみてください。

<script>

//元の文字列
var str = "あいうえおかきくけこさしすせそ";

//1文字切り出す
document.write(str.charAt(0) + "<br>");

//文字数を指定して抜き出す
document.write(str.substr(1,4) + "<br>");

//指定範囲の文字を切り出す
document.write(str.substring(5,10) + "<br>");

</script>

上記コードの結果(別窓)

まずは変数strに切り出す元となる文字列を代入しています。 文字の位置は先頭が0になります (変数strの場合「あ」は0,「か」は5になります)。

そして3種類の方法で切り出しています。 一文字だけ切り出す場合はcharAt()を使います。 括弧内は切り出す位置です。 上の例では0が入っているので、「あ」の文字が表示されます。

指定位置から文字を切り出す場合はsubstr()を使います。 括弧内は最初が切り出し位置、 2番目に切り出す文字数を指定します。 上記の例では「い」から4文字切り出します。 結果は「いうえお」となります。

最後は指定範囲の文字を切り出す方法で、substring()を使います。 括弧内は切り出す文字の開始位置終了位置です。 上記の場合、開始位置は「か」、終了位置は「さ」の‘’で、 結果は「かきくけこ」になります。

文字列.charAt(開始位置)
開始位置の文字を1文字抜き出す
文字列.substr(開始位置,文字数)
開始位置から指定文字数だけ抜き出します
文字列.substring(開始位置,終了位置)
開始位置~終了位置の間の文字を抜き出す

2進数の数値文字列を配列に格納する

前の前のページで、ゲームのデータを2進数にして保存できることを記しました。 では実際に保存データをロードし、ゲームで使えるようにするにはどうしたら良いでしょうか? 文字の切抜きを使い、配列に格納すればOKです。

<script>

//2進数文字列
var data = "1010101";

//データを格納する配列を作成する
var flg = new Array();

//文字列変数dataの文字数をカウントし、変数cntに格納する
var cnt = data.length;

//for文を使って配列に格納する
for ( var i = 0 ; i < cnt ; i++ ){

  flg[i] = data.charAt(i);

}

</script>

上の例では、「1010101」という2進数のデータを配列flgに格納しています。 for文を使い、前から1文字ずつ抜き出して配列に格納していきます。 for文の場合範囲を指定する必要があるので、文字数を取得しています。 文字数はlengthを使って取得できます。

文字列.length
文字列の文字数をカウントします。

lengthで取得した文字数は実際の文字の数ですが、 charAt()は最初の文字を0番としてカウントするので、 最後の文字はlengthで取得した数値より1つ少なくなります。 for文の「i」の範囲を変数cnt未満にしているのはそういう理由です。

あとはゲームの各場面で、○○○に会ったならflg[1]=1、 あるアイテムを拾ったならflg[2]=1、 という感じでフラグを立てていけば、物語を分岐させることができます。