uhyohyo.net

JavaScript初級者から中級者になろう

四章第一回 文字列の操作

第四章では、正規表現を解説します。正規表現とは、簡単にいえば文字列がある条件に当てはまるかどうか、あるいは文字列のどの部分が当てはまるかということを調べるものです。この文字列というのが、第四章のトピックです。

今までとは違って、少しDOMから離れることになりますね。それで、正規表現について解説する前に、まず今回はその基礎となる文字列の操作について解説します。今回解説するのは基礎的なことで、十一章第五回にも詳しい説明があります。

文字列の長さ

ある文字列があるとき、その「長さ」を知りたいことがあると思います。長さとは、つまり文字数のことです。そういう方法は、ちゃんとあります。

var aaa = "abcde";
console.log(aaa.length);

このサンプルでは、変数aaaに"abcde"を代入し、そのlengthというプロパティを見ています。「5」が表示されます。試しにこのaaaの内容を変えてみると、表示されるlengthプロパティの中身もそれにあわせて変わるはずです。

つまり、文字列の長さを知るには、その文字列のlengthプロパティを使えばいいのです。今回の場合何の役に立つのかあまり分からないかもしれませんが、文字列処理の基本であり、たとえばinput要素に入力された文字列を処理するときなどに、役立つことがあります。ちなみに、これは数値です。

ちなみに、ここですごい人なら違和感を覚えるかもしれません。ここで、変数aaaに代入されている"abcde"は、プリミティブ値一章第二回)です。プリミティブ値なら、オブジェクトではないのだから、プロパティを持たないはずです。

しかし、この変数aaaのlengthというプロパティは、確かに存在しています。これは、実はプリミティブ値もプロパティを持つ、ということを表しているわけではなく、また特殊な事情があります。なかなか難しいので、今は解説しません(九章第七回に説明があります)。不思議に思った人も、今はそういうものだと思っておきましょう。

文字列の検索

この先も、文字列がプロパティ(あるいはメソッド)を持っているような解説が続きますが、まあそういうものなので気にしないようにしましょう。

「文字列の検索」とは、文字列に、ある文字列が含まれているかどうかを調べるということです。次のサンプルを見てみましょう。

var aaa = "abcde";
var idx = aaa.indexOf("b");
console.log(idx);
        

変数idxに、aaa.indexOfの戻り値を代入して、それを表示しています。「1」と表示されます。

このindexOfは、その文字列から、引数で指定した文字列を検索して、その位置を返します。今回の場合、その文字列とは、つまりaaaです。

aaaは"abcde"で、そのうち引数の"b"1文字目(JavaScriptでは、最初の文字が0文字目だから、aが0文字目、bが1文字目となります)なので、1が返されたというわけです。

では、もし検索した文字列が含まれていなかったらどうなのでしょう。

var aaa = "abcde";
var idx = aaa.indexOf("f");
console.log(idx);
        

この場合、aaaから"f"を検索していますが、fは含まれていません。実は、そういう場合、-1が返されます。これは、結構利用できます。

また、1文字ではない文字列も検索できます。

var aaa = "abcde";
var idx = aaa.indexOf("bcd");
console.log(idx);
        

この場合、bcdは含まれているので、先頭の文字である"b"の位置が返されます。つまり1です。

文字列から抜き出す

文字列から抜き出すとは、文字列のうち一部分だけを取得することです。いろいろな方法があります。

slice・substring

まず、sliceを使う方法があります。

var aaa = "abcde";
console.log( aaa.slice(1,4) );
        

"bcd"が表示されます。1〜3文字目だけが抜き出されました。

ここで、この2つの引数は、抜き出しの開始位置と終了位置を表しています。開始位置は1、つまり1文字目だからbです。終了位置は4文字目だから、eの位置になります。

だからbからeまでが抜き出されるように思いますが、実は終了位置の1つ手前まで抜き出されるようになっています。だからbからdまでが実際に抜き出されて、"bcd"になりました。

ちなみに、抜き出すといっても、aaaから"bcd"が取り除かれるというわけではありません。aaaの中身はそのままです。あくまで「指定した範囲の文字列を得る」ということです。

また、substringというものもあり、これを使っても同様に次のようにできます。

var aaa = "abcde";
console.log( aaa.substring(1,4) );
        

結果は同じです。

では、これらの違いはどこにあるかというと、引数に負の数を指定したときに違いがでてきます。「-1文字目」とか「-2文字目」とか指定したときですね。当然、そんなことはありえないので、ここでどうするかがsliceとsubstringで違います。

まず、substringは簡単で、負の数が渡されたとき、それは0ということにします。つまり、

aaa.substring(-2,2)
aaa.substring(0,-1)
aaa.substring(-100,3)
          

などは、

aaa.substring(0,2)
aaa.substring(0,0)
aaa.substring(0,3)
          

と同義になります。

それに対し、sliceの場合は、負の数が渡されたとき、文字数を後ろから数えます。例えば、

var aaa = "abcde";
console.log( aaa.slice(-3,5) );
          

の場合、後ろから3番目の文字が開始位置で、終了位置は5文字目です。

ただし、注意するのが、前から普通に数える場合、最初の"a"は0番目であるのに対して、後ろから数える場合、最初の"e"は1番目になるということです。これは、-0というのは0と同じなので、-0で"e"の位置を表すことはできないからですね。

つまり、開始位置は"c"の位置になるということです。従って、"cde"が返ります。

ちなみに、2つめの引数は省略できます。省略した場合、終了位置は文字列の一番最後になり、文字列の一番最後まで抜き出されます。

charAt

1文字だけ抜き出す場合、もっと簡単なものがあります。それはcharAtです。

var aaa = "abcde";
console.log( aaa.charAt(1) );
          

引数が1つありますね。簡単に、その引数で指定された位置の文字を返します。今回の場合、引数は1だから、1文字目、つまり"b"が返ります。

メソッドの利用

それでは、これらを利用して、実際にどんなことができるか考えてみましょう。

0詰め

0詰めとは、例えば、数字を5桁に統一したいとき、4桁以下の数字は"00025"・"01234"のように先頭に0をつけて5文字にするというものです。

その性質上、もともとある数字は数値でも、0詰めされてできたものは文字列になりますね。

例えば、このようにする方法があります。

var num = 1234;		//0詰めする数字
var rel = "00000" + num;
var result = rel.slice(-5);	//できた文字列
console.log(result);
          

変数resultに、0詰めされた文字列が入ります。3行目で今回解説したsliceが使われていますね。

まず、変数relには、"00000"の後にnumをくっつけています。今回の場合、"000001234"となります。

その後、その文字列からsliceで抜き出しています。開始位置は-5で、終了位置は省略されているから、最後まで抜き出されます。開始位置が-5ということは、後ろから5文字めということです。そこから最後まで抜き出すから、結果として後ろから5文字を抜き出していることになります。

今回の場合、000001234の部分が抜き出されます。見事、0詰めされました。

考え方としては、数字の前に5桁になるように0をつけるとき、

     1234
    ‾‾‾‾‾

のように数字の部分を右に詰めて5桁取り出したいです。だから、

000001234
    ‾‾‾‾‾ 
          

このように前に0を付け足そうというわけです。また、なぜ0を5個つけるかというと、0を5個つけておけば、必ず5文字以上になるからです。

最後にsliceで5文字抜き出すから、5文字以上ないと困るわけです。

以上が文字列の基礎の基礎です。次回は正規表現を用いた発展的な文字列操作を解説します。