IORI online School

JavaScript、html、css の無料学習サイト

【JavaScript 初心者講座】関数と文字列操作

[JavaScript 初心者講座]関数と文字列操作

本講座で、文字列操作を学習する。文字列に対して様々な操作を行なうサンプルプログラムを見ながら学習する。 本講座で学習する「操作」は、数多く存在する「操作」の内の一部である。 沢山存在する「操作」の中から、 利用頻度が高いと思うものを抜粋した。 「操作方法をもっと沢山知りたい」と思う方は、 是非ネットで調べてほしい。

関数と引数

文字列操作の学習の前に、用語の解説を行なう。 今まで「プログラムは命令文の集まり」というスタンスで解説してきた。

alert ( "Hello" ) ;

例えば、このプログラムを解説する際 「ダイアログを表示する命令文」と解説した。

var a = [ 1 , 2 , 3 ] ;
alert ( a.length ) ;

例えば、このプログラムを解説する際、 「length は配列の値の数を求めるための命令文」と解説した。 「命令文」というのは、一般的な用語であり汎用性があり分かりやすい。 そのため、今まで「命令文」という用語を利用した。 しかし、今後はもっと狭い用語を利用したい。 一般的に、今まで「命令文」と解説したものは 関数と言われる。

alert ( "Hello" ) ;

このプログラムは、alert() 関数を利用している、と言える。

関数名 ( 値1 , 値2 , ... ) ; 関数は、関数名の後ろに括弧を記述して実行する。 関数に値を渡す場合は、括弧の中に値を記述する。 関数に渡す値を引数と言う。

関数は、「関数名()」と記述して実行する。関数名の後に括弧を記述する。 また、関数に値を渡す場合は、括弧の中に値を記述する。 関数に渡す値の事を引数と言う。

alert ( "Hello" ) ;

このプログラムは、引数に「Hello」という文字列を渡して、alert()関数を実行している、 と言える。
今後は、命令文を関数と言い換えて解説する。 「関数」という言葉を見た場合、「命令文なのだな」というイメージを持ってもらいたい。

文字列が特定の文字列を含んでいるか確認する(includes()関数)

001<script>
002
003var a = "Football" ;
004
005var x = a.includes ( "ball" ) ;
006
007alert ( x ) ;
008
009var b = "Swimming" ;
010
011var y = b.includes ( "ball" ) ;
012
013alert ( y ) ;
014
015</script>

プログラムを実行すると、「true」「false」の順番で表示する

includes()関数を利用すると、文字列に特定の文字列が含まれるか確認できる。

includes()関数 文字列に特定の文字列が含まれる場合「true」を戻し、 含まれない場合「false」を戻す。

プログラムを解説する。 3行目で変数aを宣言して、文字列「Football」を代入する。 5行目で変数aに対し、引数に「ball」を渡してincludes()関数を実行する。 変数aの値は「Football」である。 つまり、Footballという文字列に「ball」という文字列が含まれているか確認するプログラムである。
「Football」にはballが含まれている。 5行目が実行すると、変数xに「true」が代入される。

001<script>
002
003var a = "Football" ;
004
005var x = true ;
006
007alert ( x ) ;
008
009var b = "Swimming" ;
010
011var y = b.includes ( "ball" ) ;
012
013alert ( y ) ;
014
015</script>

5行目は「true」となる。7行目で変数xの値を表示する。「true」が表示する。9行目で、 変数bを宣言して、文字列「Swimming」を代入する。11行目で、 変数bに対し、引数に「ball」を渡してincludes()関数を実行する。

"Swimming".includes ( "ball" ) ;

このような形になる。文字列「Swimming」は文字列「ball」を含んでいないので、 「false」が戻る。

001<script>
002
003var a = "Football" ;
004
005var x = true ;
006
007alert ( x ) ;
008
009var b = "Swimming" ;
010
011var y = false ;
012
013alert ( y ) ;
014
015</script>

このように、変数yに「false」が代入される。 13行目で変数yの値を表示すると、「false」と表示する。

文字列を分割する(split()関数)

文字列を特定の文字列で分割する関数を紹介する。

001<script>
002
003var a = "Hello,JavaScript,IORI." ;
004
005//カンマで分割する
006var words = a.split ( "," ) ;
007
008//配列を表示する
009for ( var i = 0 ; i < words.length ; i ++ ) {
010
011  alert ( words [ i ] ) ;
012}
013</script>

プログラムを実行すると「Hello」「JavaScript」「IORI」の順番で表示する。

4行目で変数aを宣言して、文字列「Hello,JavaScript,IORI」を代入する。 この文字列は「Hello」と「JavaScript」と「IORI」がカンマで区切られている。 6行目で、変数aに対し、引数「カンマ」を渡してsplit()関数を実行する。

split()関数 文字列を引数で渡した文字列で分割する。 分割した文字は配列の値として代入され、 関数実行元へ戻される

ある文字列を特定の文字列で分割する際、split()関数を利用する。

a.split ( "," )

6行目のプログラムである。変数aに入っている文字列に対して、split()関数を実行する。

"Hello,JavaScript,IORI".split ( "," )

このように置き換えると分かりやすいだろう。 文字列「Hello,JavaScript,IORI」をカンマで区切るプログラムである。 カンマで区切った文字列は、それぞれ配列に代入される。

インデックス
0 Hello
1 JavaScript
2 IORI

文字列をカンマで分割すると、このような配列になる。 そしてこの配列を、プログラム実行元へ戻す。

001<script>
002
003var a = "Hello,JavaScript,IORI." ;
004
005//カンマで分割する
006var words = a.split ( "," ) ;
007
008//配列を表示する
009for ( var i = 0 ; i < words.length ; i ++ ) {
010
011  alert ( words [ i ] ) ;
012}
013</script>

6行目で変数wordsに、split()関数の実行結果を代入する。 変数wordsには、
[ "Hello" , "JavaScript" , "IORI" ] ;
という配列が代入される。

001<script>
002
003var a = "Hello,JavaScript,IORI." ;
004
005//カンマで分割する
006var words = [ "Hello" , "JavaScript" , "IORI" ] ;
007
008//配列を表示する
009for ( var i = 0 ; i < words.length ; i ++ ) {
010
011  alert ( words [ i ] ) ;
012}
013</script>

このような形になる。9行目からfor文が始まる。 forブロックが実行する回数は、
words.length
である。変数wordsは配列であり、 配列.length
は、配列の値の数を求めるものだった。 変数wordsには「Hello」「JavaScript」「IORI」の三つの値が入っている。 つまり、
words.length
は「3」である。

001<script>
002
003var a = "Hello,JavaScript,IORI." ;
004
005//カンマで分割する
006var words = [ "Hello" , "JavaScript" , "IORI" ] ;
007
008//配列を表示する
009for ( var i = 0 ; i < 3 ; i ++ ) {
010
011  alert ( words [ i ] ) ;
012}
013</script>

こうなる。forブロックが実行するたびに、変数iの値は「0」「1」「2」と増えていく。

インデックス
0 Hello
1 JavaScript
2 IORI

変数wordsの配列の状態である。

forブロック繰り返し回数 変数iの値 words [ i ] words [ i ] の値
1回目 0 words [ 0 ] Hello
2回目 1 words [ 1 ] JavaScript
3回目 2 words [ 2 ] IORI

このようにforブロックが繰り返すたびに、「Hello」「JavaScript」「IORI」と順番に表示する。

文字列の一部を取得する(substr()関数)

ある文字列から一部分切り取る関数を紹介する。

001<script>
002
003var a = "Football" ;
004
005var result = a.substr ( 2 , 3 );
006
007alert ( result ) ;
008
009</script>

プログラムを実行すると、「otb」と表示する。

文字列.substr ( 開始位置 , 文字数 ) 文字列を、「開始位置」から「文字数」の数だけ切り取る。

substr()関数を用いると、文字列の一部を切り取る事ができる。 substr() 関数の第一引数に、切り取る開始の位置を指定し、第二引数に切り取る文字の数を指定する。 プログラムを見よう。

001<script>
002
003var a = "Football" ;
004
005var result = a.substr ( 2 , 3 );
006
007alert ( result ) ;
008
009</script>

3行目で、文字列「Football」を作成して変数aに代入する。 5行目で変数aに対して substr()関数を実行する。 変数aには文字列「Football」が入っている。

005var result = "Football".substr ( 2 , 3 );

今回変数aに入っている「Football」の一部分を切り取りたい。 切り取る場所は「開始位置:2、文字数3」である。

0 1 2 3 4 5 6 7
F o o t b a l l

開始位置は「2」なので、「o」から切り取りが開始する。 切り取る文字数は「3」なので、「b」まで切り取られる。 つまり、

005var result = "Football".substr ( 2 , 3 );

このプログラムを実行した結果、文字列「otb」戻る。

001<script>
002
003var a = "Football" ;
004
005var result = "otb";
006
007alert ( result ) ;
008
009</script>

5行目で、文字列「otb」が変数resultに代入する。 7行目で変数resultの値、「otb」が表示する。

lengthプロパティ

プロパティについて解説する。
001<script>
002
003var a = [ 1 , 2 , 3 ] ;
004
005//3が表示
006alert ( a.length ) ;
007
008var b = "Football" ;
009
010//8が表示
011alert ( b.length ) ;
012
013</script>

プログラムを実行すると、「3」「8」と表示する。

3行目で、変数aを宣言して配列を代入する。配列の値の数は「3」である。 6行目で、

006alert ( a.length ) ;

このように記述している。これは配列の値の数を求めるプログラムである。
配列.length
lengthの後ろに括弧がついていない。関数を実行する場合、
関数名();
このように関数名の後ろに括弧がつく。 lengthは関数ではなく、プロパティと言われるものである。 配列の中に「配列の値の数を保存しておく変数」が存在する。 それが 「 length プロパティ」である。 lengthは配列の中にある変数で、配列の数を保存している。 関数とは異なるので注意してほしい。

001<script>
002
003var a = [ 1 , 2 , 3 ] ;
004
005//3が表示
006alert ( a.length ) ;
007
008var b = "Football" ;
009
010//8が表示
011alert ( b.length ) ;
012
013</script>

8行目で変数bを宣言して、文字列「Football」を代入する。 11行目で、文字列に対してlength を利用している。

010//8が表示
011alert ( b.length ) ;

文字列.length 文字列の文字数(長さ)を求めるプログラム

lengthの後ろに括弧はついていない。lengthは関数ではなく、 文字列のプロパティである。 文字列の中には「文字列の長さを保存する変数」が存在する。 それが length プロパティである。 length プロパティには文字列の長さが入っている。 「Football」は8文字なので、 プログラムの11行目で「8」が表示する。

まとめ

関数名 ( 値1 , 値2 , ... ) ; 関数は、関数名の後ろに括弧を記述して実行する。 関数に値を渡す場合は、括弧の中に値を記述する。 関数に渡す値を引数と言う。

includes()関数 文字列に特定の文字列が含まれる場合「true」を戻し、 含まれない場合「false」を戻す。

split()関数 文字列を引数で渡した文字列で分割する。 分割した文字は配列の値として代入され、 関数実行元へ戻される

文字列.substr ( 開始位置 , 文字数 ) 文字列を、「開始位置」から「文字数」の数だけ切り取る。

文字列.length 文字列の文字数(長さ)を求めるプログラム