IORI online School

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

【JavaScript 入門講座】文字列結合

[JavaScript 入門講座]文字列結合

前講座で様々な計算式を見た。alert()の括弧の中に計算式を記述すると、 計算式の計算結果がダイアログに表示された。 前講座で言い忘れたが、 「+」や「/」や「*」や「/」などは 算術演算子と言う。 プログラム用語なので是非覚えてほしい。 では、本講座の学習内容を確認する。

  1. 文字列結合
  2. 文字列結合の応用

本講座では、「文字列結合」を学習する。 本講座も、前講座に引き続き難しい。 文字列結合は、アプリケーションの製造で頻繁に利用する技術である。 また、文字列結合の学習過程において、大切な何かを習得するだろう (数値と文字列の動作の違いを学習するだろう)。 では、サンプルプログラムを見ながらゆっくり学習しよう。

文字列結合

文字列結合 文字列結合とは、文字列と文字列を「+」演算子で繋げる事である。

文字列結合をするためには、「+」演算子を利用する。 以前の講座で、数値同士を加算するプログラムを見た。 数値同士を加算する場合、たとえば「 10 + 5 」のように 「+」演算子を利用した。 こんかい、二つの文字列に対して、 「+」演算子を利用する。

文字列を加算?文字列に文字列を足すの? イルカとクジラのハイブリット的な?

・・・何を言っているか分からない。

001<script>
002alert ( "走る" + "IORI" ) ;
003</script>

テキストエディタにこのように記述して保存しよう。 ファイル名はsample05.htmlで良いだろう。 ファイルを保存したら、Webブラウザでプログラムを開こう。 プログラムを開くと「走るIORI」とダイアログに表示される。
では、プログラムを解説する。まず、 「走る」という文字列がある。 「走る」はダブルクォーテーションで囲まれているので、文字列である。 同様の理由で「IORI」も文字列である。 つまりこのプログラムは、二つの文字列「走る」と「IORI」に対して、「+」演算子を利用している。

文字列結合 "文字列1" + "文字列2" = "文字列1文字列2"

二つの文字列を、「+」演算子くっつける事ができる。

001<script>
002alert ( "走る" + "IORI" ) ;
003</script>

このプログラムは、まず括弧内の「+」演算子が実行する。 文字列同士を「+」で繋いでいるので、文字列結合する。 「走る」と「IORI」が文字列結合すると、 「走るIORI」となる。 つまり、括弧の中は「走るIORI」となる。 このプログラムは次のプログラムと同じである。

001<script>
002alert ( "走るIORI" ) ;
003</script>

文字列結合して「走るIORI」となった。 このプログラムが実行すると、「走るIORI」とダイアログに表示する。 解説は以上である。 もう一つサンプルを掲載しよう。

001<script>
002alert ( "初恋の人" + "IORI" ) ;
003</script>

是非、くっつけてほしい。無理か?そうか。残念だ。 過ぎ去った時間と人は戻らない。

文字列結合のプログラム1

文字列結合を学習した。完全に完璧に学習した。 パソコンをシャットダウンして、今から海水浴に出かけようぜ。 しかし、その前に確認すべき事がある。 パソコンを起動して、テキストエディタに次のプログラムを記述しよう。

001<script>
002alert ( "201" + "号室" ) ;
003</script>

これは文字列結合である。 まず「201」に注目する。 ダブルクォーテーションで囲んでいるので、文字列である。 「201」は数値だが、ダブルクォーテーションで囲まれているので、文字列として扱われる。

ダブルクォーテーション(又はシングルクォーテーション)で囲んでいるものは、 全て文字列として扱われる。

「201」という数値であっても、 ダブルクォーテーションで囲んだ瞬間、文字列として扱われる。 つぎに、「号室」に注目する。 ダブルクォーテーションで囲まれているので文字列である。 つまりこのプログラムは、文字列「201」と文字列「号室」を「+」演算子で繋いでいる。 すなわち、文字列結合をしている。 このプログラムは次のプログラムと同じである。

001<script>
002alert ( "201号室" ) ;
003</script>

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

文字列結合のプログラム2

文字列結合を学習した。完全に完璧に学習した。 パソコンをシャットダウンして、今から海水浴に出かけようぜ。 しかしその前に、パソコンを起動して、 次のプログラムをテキストエディタに記述してほしい。

001<script>
002alert ( "5" + "2" ) ;
003</script>

やっかいなプログラムである。

さすがに、5 + 2 が実行して、7が表示するだろう。

私はこう思うわけだが、どうやら違うらしい。 このプログラムを実行すると「52」がダイアログに表示する。

52って何?

一瞬何が起こったかわからない。 「52」ってどこから出てきたの?謎の数なの?謎の素数なの? しかし、もう気がついているはずだ。

001<script>
002alert ( "5" + "2" ) ;
003</script>

「5」と「2」は、ダブルクォーテーションで囲まれている。 つまり文字列として扱われる。 つまりこれは「5」と「2」を文字列結合するプログラムである。 「5」と「2」を文字列結合するという事は、 5と2がくっつく。 すなわち「52」となる。 このプログラムは、次のプログラムと同じである。

001<script>
002alert ( "52" ) ;
003</script>

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

文字列結合の応用1(数値と文字列の文字列結合)

001<script>
002alert ( 10 + "2" ) ;
003</script>

やっかいなプログラムである。

さすがに、10 + 2 が実行して、12が表示するだろう。

私はこう思うわけだが、またまた違うのである。

文字列と数値に+演算子を適用 「+」演算子を適用する二つの値のどちらかが文字列の場合、 自動的に文字列結合になる

たとえば「 A + B 」というプログラムがあったと仮定する。 もしAが文字列なら、「 A + B 」は文字列結合となる。
つまり、「 "A" + B = "AB" 」となる
もしBが文字列なら、「 A + B 」は文字列結合となる。
つまり、「 A + "B" = "AB" 」となる。

001<script>
002alert ( 10 + "2" ) ;
003</script>

このプログラムは「+」演算子の右側、つまり「2」が、 ダブルクォーテーションで囲まれているので、文字列である。 「10」という値は数値だが、「2」が文字列なので、 この式は文字列結合をする。
すなわち「 10 + "2" = "102" 」である。 このプログラムは次のプログラムと同じである。

001<script>
002alert ( "102" ) ;
003</script>

このプログラムが実行すると、「102」と表示する。 解説は以上である。

文字列結合の応用2

少しだけ複雑なプログラムを書く。

001<script>
002alert ( "10 + 2 = " + ( 10 + 2 ) ) ;
003</script>

このプログラムを考える。ダイアログにどのような文字が表示するだろうか?
まず、括弧で囲まれた「 ( 10 + 2 ) 」このプログラムが実行される。 括弧は優先順位が高い。

001<script>
002alert ( "10 + 2 = " + 12 ) ;
003</script>

このように、括弧の中の計算式が計算され、「12」となる。
次に、文字列「10 + 2 = 」と数値「12」の文字列結合が実行される。

001<script>
002alert ( "10 + 2 = 12" ) ;
003</script>

プログラムを実行すると「10 + 2 = 12」と表示する。

まとめ

文字列結合 文字列結合とは、文字列と文字列を「+」演算子で繋げる事である。

文字列と数値に+演算子を適用 「+」演算子を適用する二つの値のどちらかが文字列の場合、 自動的に文字列結合になる