【プログラミング入門】【JavaScript】13日目文字列の操作(文字数、比較、抜き取り、結合、置換)

2022.10.10更新

JavaScriptでプログラミング入門のタイトル画像になります

ホームページにアニメーションなどの動きをつける時に使われるJavaScript(ジャバスクリプト)というプログラミング言語を使って初心者・入門者向けにプログラミングのキホンを解説していきます！

難しい設定などはほとんどなく手軽に本格的なプログラミングを学ぶ事ができます。

簡単なホームページの作り方も解説しますのでホームページ作りに興味がある方もぜひご覧ください。

文字列の操作

今回は文字列についてもう少し詳しくやりたいと思います。

文字列の文字数を調べたり、文字列同志をつなげたり、逆に文字列を分解したり・・・。

少し地味ですが、事務処理系のプログラムを作ったりする時は何気によく使います。

文字数

■13日目　プログラム１■


<script>

	/*jspgm13_1*/
	/*13日目　プログラム１*/

	var bunsyou1 = "hello world";
	var bunsyou2 = "おはよう";
	var bunsyou3 = "りんごは英語でapple";

	document.write(bunsyou1 + " → " + bunsyou1.length + "<br>");
	document.write(bunsyou2 + " → " + bunsyou2.length + "<br>");
	document.write(bunsyou3 + " → " + bunsyou3.length + "<br>");

</script>

■実行結果■

■説明■

文字数が知りたい時は


bunsyou1.length

知りたい文字列の後ろに「.length」というのをつけます。

ひらがな、漢字、アルファベットの区別なく一文字ずつカウントしてくれます。

実行結果にもあるように「hello world」などは空白の分もカウントするのでそのへんは注意が必要です。

同じか？

■13日目　プログラム２■


<script>

	/*jspgm13_2*/
	/*13日目　プログラム２*/

	var kotae;
	
	alert("英単語テストです！\n答えを小文字で入力してください！");
	kotae = prompt("りんごは英語で？");

	if(kotae == "apple"){
		alert("よくできました！正解です！");
	}
	else{
		alert("残念！不正解です！");
	}

</script>

■実行結果■

■説明■

文章同士が同じかどうかを調べるのには


if(kotae == "apple")

数字と同じようにそのまま「==」が使えます。

一部を抜き取る

■13日目　プログラム３■


<script>

	/*jspgm13_3*/
	/*13日目　プログラム３*/

	var bunsyou = "hello world";
	
	var kekka1 = bunsyou.substring(0,3);
	var kekka2 = bunsyou.substring(2,3);
	var kekka3 = bunsyou.substring(4,7);

	document.write("kekka1 = " + kekka1 + "<br>");
	document.write("kekka2 = " + kekka2 + "<br>");
	document.write("kekka3 = " + kekka3 + "<br>");

</script>

■実行結果■

■説明■

文字列の一部を抜き取るには


kekka1 = bunsyou.substring(0,3);

「.substring(始点,終点)」こちらをお尻につけます。

文字列の操作だけではなく、このようにお尻に「.」ドットなんとかでいろいろな機能を使う事ができたりします。

文章の一番最初の文字は０番目になります。

一文字だけ抜き出したい時は「.substring(1,1)」ではなく「.substring(1,2)」のように選択します。

文章を分ける

■13日目　プログラム４■


<script>

	/*jspgm13_4*/
	/*13日目　プログラム４*/

	var bunsyou = "田中,鈴木,佐藤,吉田,斉藤";

	var hairetu1 = bunsyou.split(",");
	var hairetu2 = bunsyou.split(",",3);

	var suji = 0;

	for(suji = 0;suji < hairetu1.length;suji++){
		document.write(suji + ":" + hairetu1[suji] + "<br>");
	}

	document.write("<br>");

	for(suji = 0;suji < hairetu2.length;suji++){
		document.write(suji + ":" + hairetu2[suji] + "<br>");
	}

</script>

■実行結果■

■説明■

ある決まった文字で文章を分けたい時には

			
bunsyou.split(",");

「.split("分ける文字")」こちらを使います。

今回は「,」コンマで分けてますが、もちろん「分ける文字」を変えれば「/」スラッシュや「:」コロンで分ける事も可能です。

分けたデータを用意した配列に順番に保存してくれます。

３つだけ抜き出したい時などは

			
bunsyou.split(",",3);

「.split("分ける文字",個数)」のようにすれば３つ分だけデータを分けて保存してくれます。

例えば大量に並んだデータ、いわゆるデータファイルというものからデータを読み込み、それを配列に保存するような時に使われます。

何も言わずに使ってしまいましたが配列の個数を知りたい時も「hairetu1.length」のようにお尻に「.length」をつければ知る事ができます。

配列の最後まで「for」命令でくり返し処理をしたい時などによく使います。

文章をくっつける

■13日目　プログラム５■


<script>

	/*jspgm13_5*/
	/*13日目　プログラム５*/

	var bunsyou1 = "「私の名前は";
	var bunsyou2 = "田中一郎です！」";
	var bunsyou3 = bunsyou1 + bunsyou2;

	document.write(bunsyou3);

</script>

■実行結果■

■説明■

文章同士をくっつけたい時は

そのまま「＋」でくっつける事ができます。

今までも何度か登場したので説明はいらないですね！

文章の置き換え

■13日目　プログラム６■


<script>

	/*jspgm13_6*/
	/*13日目　プログラム６*/

	var bunsyou1 = "校長先生、おはようございます！教頭先生、おはようございます！";

	var bunsyou2 = bunsyou1.replace("おはようございます","おいっす");
	var bunsyou3 = bunsyou1.replace(/おはようございます/g,"おいっす");

	document.write("ひとつだけ置き換え<br>" + bunsyou2);

	document.write("<br>");
	document.write("<br>");

	document.write("全て置き換え<br>" + bunsyou3);
	
</script>

■実行結果■

■説明■

文章を置き換えるには


bunsyou1.replace("おはようございます","おいっす");

「.replace("置き換えたい元の文章","置き換える文章");」こちらを使います。

一致した最初の文章だけ置き換えてくれます。

全て置き換えたい場合は元の文章のトコロを


bunsyou1.replace(/おはようございます/g,"おいっす");

のように書きます。

これは正規表現(せいきひょうげん)という文字列操作にはかかせないものを使ったワザなのですが、ここでは説明を省略させていただきます。

なぜに「/」の中の文字列に「"」がつかないのか？などいろいろギモンもあるかと思いますがここではそのまま覚えてください。

文字列を操作する便利ワザのほんの一部を紹介させていただきました。

応用編ではこのような文字列操作の便利ワザを使ったタイピングゲームを作っていきたいと思います。

次回はいよいよ自分で簡単な命令を作っていきます。

次回

14日目(最終日) 関数の使い方

CONTENTS

はじめての
プログラミング
HOME

～はじめに～

プログラミングを
始める前に

～基本編～

～応用編～

■INDEX■

文字列の操作
文字数
同じか？
一部を抜き取る
文章を分ける
文章をくっつける
文章の置き換え

【プログラミング入門】【JavaScript】13日目 文字列の操作(文字数、比較、抜き取り、結合、置換)

文字列の操作

文字数

■13日目 プログラム１■

■実行結果■

■説明■

同じか？

■13日目 プログラム２■

■実行結果■

■説明■

一部を抜き取る

■13日目 プログラム３■

■実行結果■

■説明■

文章を分ける

■13日目 プログラム４■

■実行結果■

■説明■

文章をくっつける

■13日目 プログラム５■

■実行結果■

■説明■

文章の置き換え

■13日目 プログラム６■

■実行結果■

■説明■

次回

【プログラミング入門】【JavaScript】13日目文字列の操作(文字数、比較、抜き取り、結合、置換)

■13日目　プログラム１■

■13日目　プログラム２■

■13日目　プログラム３■

■13日目　プログラム４■

■13日目　プログラム５■

■13日目　プログラム６■