Logical Thinking and Programming in 2012 Spring
Minohara Class

Home >> Lecture 10

第10回 配列と文字列

配列

多くのプログラミング言語では、多数のデータを扱うために配列という仕組みを持っています。JavaScriptも例外ではありません。配列とは、変数名は1つのまま、それに番号をつけて複数の値を記憶できるようにしたものです。

配列の概念

配列の中の1つ1つの値を記憶できる場所のことを「要素」と呼びます。上でも書きましたが、配列の場合、変数名は配列全体に対して1つだけです。配列全体は沢山の要素の集まりです。それぞれの要素が、今まで学習してきた変数のように使えます。逆に言うと、変数名だけでは、これまでの変数のようには扱うことができないので注意してください。

配列リテラル

配列について、その要素を列挙する形での定数の書き方（リテラルの書式）が決められています。 配列リテラルは次のように記述します。両側を、[ ]で囲み、各要素はカンマで区切ります。

[値, 値, 値, ...]

値の数は任意で、0個以上の必要な数だけ指定することができます。0個の場合には空っぽの配列が生成されます。実際に記述した例を以下に示します。

[ 20, 100, 50, 15, 89, 102 ]  // 6つの整数の要素から構成される配列 
[ "佐藤", "鈴木", "田中", "高橋" ]  // 4つの文字列の要素から構成される配列
[ ]  // 空の配列

上の例では全ての値が整数や、文字列になっていますが、JavaScriptでは、値毎に値の型を変える事ができます。例えば、「["a", 3]」と書くと、1つめの値は文字列ですが、2つめの値は数値として扱われますので注意が必要です。 更には、オブジェクトの配列を作ったりすることもできます。また、配列をオブジェクトのプロパティの1つに指定してあるクラスもあります。

配列の生成

配列を生成する場合にもオブジェクトと同様に、配列リテラルで初期化された配列を生成する方法と、コンストラクタを使う方法があります。まず、配列リテラルを使った方法についてみていきましょう。配列リテラルを使った方法は簡単です。これが配列リテラルを使った配列の生成は次のような書式に拠ります。

var 変数名 = [ 値, 値, 値, ... ];

実際にプログラムの中で使うと下記のようになります。この例では、familyNameという変数に「"佐藤"」「"鈴木"」「"田中"」「"高橋"」の4つの文字列が入った配列を代入しています。

var familyName = [ "佐藤", "鈴木", "田中", "高橋" ];

コンストラクタを使う方法では、次のようにArrayクラスのオブジェクトとして生成させます。 2番目の書式は、上記の配列リテラルを使った配列の生成と同等です。

var 変数名 = new Array( 配列のサイズ );
var 変数名 = new Array( 要素の値, 要素の値, 要素の値, ... );

以下の例では、23個のサイズを持つ配列と、４つの文字列の要素から成る配列を作成しています。

var valueList = new Array( 23 );
var familyName = new Array( "佐藤", "鈴木", "田中", "高橋" );

配列の要素の参照

配列の各要素の参照は、変数名の後に鍵括弧[ ]をつけ、その中に番号を入れて指定をします。この番号のことを、インデックスや添え字と呼んでいます。部屋番号だと思ってください。

配列名[ 要素の番号 ]

ここで気をつけなければならないことは、配列の番号が0番から始まることです。2番目の場合は、0, 1なので「1」を指定します。また、数字の代わりに変数を指定することもできます。下に例を示します。この例では1行目でarrayという配列を作り、3行目で0から数えて1番目の要素を表示しています。

var array = ["佐藤", "鈴木", "田中", "渡辺", "伊藤", "山本"];

document.write( array[ 1 ] );  // "鈴木"
var index = 4;
document.write( array[ index ] );  // "伊藤"

また、for文と組み合わせることによって、全ての要素を順に出力することも可能です。下の例では、配列が持つlengthプロパティ（配列のサイズを持ちます）を使ってfor文で繰返しを作り、全ての配列要素に対して「○番目: ××」の様に表示をしています。

var array = ["佐藤", "鈴木", "田中", "渡辺", "伊藤", "山本"];

for ( var i = 0; i < array.length; i++) {
  document.write( i + "番目: " + array[ i ] + "<br>");
}

Webページでの応用では、次のようにselect要素の候補を作るのに、配列から 作る場合があります。また、select要素では、現在選択されている要素の番号をselectedIndexという プロパティが持っていますので、それを利用して配列の要素を参照することができます。

<select id="selector" onchange="setcampus( )"></select>
選択結果：<input id="campus" type="text size="10"  />

<script type = "text/javascript">
<!--
var campuslist = ["三田", "日吉", "信濃町", "矢上", "湘南藤沢" ];

// select要素の候補に設定していく
var selector = document.getElementById("selector");
for (var i = 0; i < campuslist.length; i=i+1 ) {
  selector.innerHTML += ("<option> " + campuslist[ i ] + "</option>");
}

// 最初は0番目の要素をセットしておく
var campus = document.getElementById( "campus" );
campus.value = campuslist[ 0 ];

// 変更のときに呼び出される関数
function setcampus( ) {
  var campus = document.getElementById( "campus" );
  campus.value = campuslist[ selector.selectedIndex ];
}
//-->
</script>

実際に動かせてみるとこんな感じです。

 選択結果：

配列の要素の一覧表示

配列の要素をテーブルなどの形で一覧表示させてみましょう。

次にキャンバスを用意して、横の棒グラフとして一覧表示させてみましょう。

配列の要素への代入

通常の変数と同様に、配列の要素へ、後から値を代入することができます。

配列名[ 要素の番号 ] = 式;

繰返しを使って配列の要素に値を代入してみます。

var valuelist = new Array( 10 );

for ( var i = 0; i < valuelist.length; i=i+1 ) {
	valuelist[ i ] = (i + 1) * 10;
}

次の例は、フィボナッチ数列の形で代入しています。

var fibonacci = new Array( 30 );

fibonacci[ 0 ] = 0;
fibonacci[ 1 ] = 1;
for ( var i = 2; i < fibonacci.length; i=i+1 ) {
	fibonacci[ i ] = fibonacci[ i-1 ] + fibonacci[ i-2 ];
}

次の例は、次回に出てくるMath.random( )を用いて、0から100までの値を配列の要素にセットしています。 Math.random( )は、0から1（ただし1未満）の間の任意の実数を乱数として返してくれます。

var valuelist = new Array( 50 );

for ( var i = 0; i < valuelist.length; i=i+1 ) {
	valuelist[ i ] = Math.random( ) * 100;
}

配列の典型的な操作

繰返しを使った配列全体への操作を記述してみます。ここでは、Excelと同様に、総和、平均、最大値、最小値、特定の数のカウントなどを行なってみます。まずは、総和を求めるのは次のように記述します。

	var valuelist = new Array( 50 );

	// 乱数で配列の値を初期化
	for ( var i = 0; i < valuelist.length; i=i+1 ) {
		valuelist[ i ] = Math.floor( Math.random( ) * 101 );  // 小数以下切捨て
	}

	// 配列のすべての要素の総和と平均を求める
	var sum = 0;
	for ( var i = 0; i < valuelist.length; i=i+1 ) {
		sum = sum + valuelist[ i ];
	}
	document.write( "配列の要素の総和: " + sum + "   及び平均: " + (sum/valuelist.length) + "<br>" ); 

JavaScriptの除算は、実数の除算になりますので、平均についても小数部分があれば、表示されます。 同じように乱数で配列が初期化されていると仮定して、配列valuelistの最小値と最大値を求めます。 以下の記述で注意しなければならないのは、変数minとmaxは、最小値、最大値そのものを保持している 訳ではなくて、最小値、最大値がある要素のインデックス（部屋番号）を持っているということです。

	// 配列の最小値と最大値
	var min = 0;  // 最小値の入っている番号を持つ
	var max = 0;  // 最大値の入っている番号を持つ

	for ( var i = 1; i < valuelist.length; i=i+1 ) {
		if ( valuelist[ max ] < valuelist[ i ] ) { max = i; }
		if ( valuelist[ min ] > valuelist[ i ] ) { min = i; }
	}
	document.write( "配列の要素の最大値: " + valuelist[ max ] +
 		"   及び最小値: " + valuelist[ min ] + "<br>" ); 
 

そのため、最後の記述のように、最大値、最小値そのものを表示するためには、 valuelist[ max ], valuelist[ min ]というように記述しなければなりません。 次に、指定された値が配列に何個あるのかをカウントする部分について記述してみます。 これも、配列valuelistが初期化されていると仮定しています。

	// 指定された値が配列の要素に何個あるかカウントする
	var target = parseInt( prompt( "値を入力(0-100): ", 20 ) );
	var count = 0;
	for ( var i = 0; i < valuelist.length; i=i+1 ) {
		if ( target == valuelist[ i ] ) { count = count + 1; }
	}
	document.write( "指定された値: " + target + " は " + count + "個ありました。<br>" ); 

度数分布を求める

配列の中にどのような数が入っているか、統計データとして調べたいことがあります。そのときに、ある数がどの程度出現したかを、別の配列に保存するやり方を考えてみましょう。たとえば、整数の配列birthの中に、ある統計調査で調べた誕生月が入っているとします。これを、上記の特定の数のカウントの仕方を利用して、それぞれの誕生月ごとに何人いるのか頻度を数えてみましょう。整数の配列monthは、それぞれの月について、何人いたかを示します。最初、この配列の要素はすべて０に初期化され（０人であることを示す）、そして、配列birthが走査されるにしたがって、該当する月の要素が+1されていきます。なお、わかりやすくするために、配列monthは、サイズを13にしておき、1〜12までのインデックスの要素だけを使っています。すなわち、month[0]は使われていません。

	var  birth = [ 1, 3, 5, 2, 8, 11, 4, 6, 7, 9, 8, 10, 12, 1, 4, 5, 3, 2, 1, 8, 9, 5, 6, 7, 12, 4, 2];
	// 度数の配列の確保とその要素の初期化
	var  month = new Array( 13 );
	for ( var i = 1; i < month.length; i++ ) {  month[ i ] = 0; }
	
	// 誕生月の配列を走査し、度数の配列の該当する月の要素のカウントを１つあげる
	for ( var index = 0; index < birth.length; index++ ) {
		month[  birth[ index ]  ]++;
	}
	// 人数を書き出す
	for ( var i = 1; i < month.length; i=i+1 ) {  
		document.write( i  +  "月の誕生日の人は" + month[ i ] + "人いました<br>" );
	}
	

この誕生日の例題を拡張させて、度数分布を求めるプログラムを記述してみましょう。 すなわち、配列の要素が取り得る値を、一定の区切りで区切って、その個数をカウントしていく という形で関数を記述します。

	
	// 配列valuelistについて、最小値をmin、最大値をmaxとして、その間をn区間に区切る
	function  histogram( valuelist, min, max, n ) {
	
		// 度数の配列の確保と、差分値を計算
		var histo = new Array( n );
		var delta = (max - min) / n;
		// 配列の要素を走査していく
		for ( var i = 0; i < valuelist.length; i=i+1 ) {
			// 各要素についてどの度数に入るのか調べる
			var target = valuelist[ i ];
			for ( var j = 0, sec = min; j < n; j=j+1, sec += delta ) {
				if  ( sec <= target && target < sec+delta ) {
					histo[ j ] ++;
					break;
				}
			}
		}
		return histo;
	}
	

配列の要素をランダムに並び替える

次の関数は、1から100までの数を順番に配列に置き、それを乱数を使って２つの要素を選び出し、 それを交換するプログラムです。200回（配列のサイズの２倍の回数）取り換えを行なっています。 このようにすれば、1から100までの数が必ず１回だけ出現するような、乱数系列を出すことができます。 順番だけをランダムにしたいときに良く使われます。

	// nからmまでの整数の乱数を生成する関数
	function randomInteger( n, m ) {
		return Math.floor( Math.random( ) * (m+1-n) + n );
	}   

	// 受け取った配列をシャッフルする関数
	function  shuffle( values ) {
		for ( var counter = 0; counter < values.length * 2; counter++ ) {
			// 2つの要素のインデックスを乱数で選び出す
			var  i = randomInteger( 0, values.length-1 );
			var  j = randomInteger( 0, values.length-1 );
			// 一度に取り替えることができないので、一時的に保存する変数を用意する
			var  temporary = values[ i ];
			values[ i ] = values[ j ];
			values[ j ] = temporary;
		}
	 }

	// 実際に呼び出して使ってみる
	var  datalist = new Array( 100 );
	for ( var i = 0; i < datalist.length; i++ ) {  datalist[ i ] = i+1; }
	shuffle( datalist );
	for ( var i = 0; i < datalist.length; i++ ) {  
		document.write( datalist[ i ] + "     " );
		if ( i % 10 == 9 ) { document.write( "<br>" ); }
	}
	

配列全体への操作

配列オブジェクトには、様々な関数（オブジェクトに関連付けられている関数をメソッドと呼ぶことがあります）が用意されています。例えば、2つのオブジェクトを連結したい場合には次のようにします。この例では、array1とarray2のそれぞれの配列を始めに生成し、その2つを4行目で結合して、arrayという変数に代入しています。結果としてarray3の中身は「["佐藤", "鈴木", "田中", "渡辺", "伊藤", "山本"]」となります。

	var array1 = ["佐藤", "鈴木", "田中"];
	var array2 = ["渡辺", "伊藤", "山本"];

	var array3 = array1.concat( array2 );

他にも下記の表のようないろいろなメソッドがあります。ただし、基になる配列を変更してしまうものとconcat( )のように新しい配列を生成して、それを返すものがあるので注意してください。

また、メソッドではありませんが、プロパティとして「length」があります。lengthを使うことによって配列の要素の数を知ることができます。

配列への要素の追加と削除などは、次のように行ないます。

	var namelist = ["佐藤", "鈴木", "田中", "渡辺", "伊藤", "山本"];

	// 最後に高橋を追加
	namelist.push( "高橋" );
	document.write( namelist.toString( )+ "<br>" );
	
	// 先頭から佐藤を取り出す
	var first = namelist.shift( );
	document.write( namelist.toString( )+ "<br>" );

	// 先頭に加藤を追加
	namelist.unshift( "加藤" );
	document.write( namelist.toString( )+ "<br>" );
	
	// 最後尾から高橋を取り出す
	var last = namelist.pop( );
	document.write( namelist.toString( )+ "<br>" );
	
	// すべての要素を「と」で結んだ文字列を表示
	document.write( namelist.join( "と" )+ "<br>" );
	

配列の一部分を抜き出したり、一部分の値を変えたりするのは、次のように行ないます。 sliceは、元の配列には影響はありません。

	var namelist = ["佐藤", "鈴木", "田中", "渡辺", "伊藤", "山本"];

	// 田中から伊藤までを抜き出して新しい配列にする
	var sublist = namelist.slice( 2, 5 );

	// 最初の3人を抜き出して新しい配列にする
	var startlist = namelist.slice( 0, 3 );

	// 最後の2人を抜き出して新しい配列にする
	var endlist = namelist.slice( 4 );
	
	// 田中から伊藤までの値を、渡辺、吉川にする (２番目のパラメータは個数）
	namelist.splice( 2, 3, "渡辺", "吉川" );
	
	// 鈴木と渡辺を単に削除
	namelist.splice( 1, 2 );
	
	// ３番目（通常でいう４番目）に加藤を追加
	namelist.splice( 3, 0, "加藤" );

配列の整列（ソート）

配列の要素を順番にならべるのは、次のように行ないます。

	var valuelist = new Array( 50 );

	// 乱数で配列の値を初期化
	for ( var i = 0; i < valuelist.length; i=i+1 ) {
		valuelist[ i ] = Math.floor( Math.random( ) * 101 );  // 小数以下切捨て
	}
	
	// 小さい順に整列
	valuelist.sort( );
	document.write( valuelist.toString( )+ "<br>" );

	// 反対にするので、大きい順に整列
	valuelist.reverse( );
	document.write( valuelist.toString( )+ "<br>" );

上記の小さい順に並べるsort関数は、文字列の比較を指定してしまいます。そのため、"10"と"2"では、数字が"1"から始まっているので、"10"の方が前に来てしまいます。そこで、次のような数字として２つの数を比較する関数を定義して、数の小さい順に並べてあげます。

	// sort用の比較のための関数
	function numcompair( a, b ) {
		if ( Number( a ) < Number( b ) ) { return -1; }  // aがbより小さいときは-1を返す
		else if ( Number( a ) > Number( b ) ) { return 1; }　// aがbより大きいときは1を返す
		else { return 0; }  // aとbが等しいときは、0を返す
	}
	
	// もっと簡単に記述
	function numbercompair( a, b ) {
		returna-b;
	}
	
	// 数的に小さい順に整列
	valuelist.sort( numcompair );  // あるいはvaluelist.sort( numbercompair );
	document.write( valuelist.toString( )+ "<br>" );

自分で小さい順に並べるには、選択ソート（整列）法を用いて、 繰返しを使って小さい順に並べることもできます。 配列の前から順に見ていき、その要素から最後の要素までの間での最小値を求めて、 その値とその要素を交換します。これを配列の最後まで行なえば、小さい順に並んでいます。 以下にこのソートを行なう関数を記述してみます。

	// 選択法を用いたソート関数
	function numbersort( array ) {
		for ( var i=0; i < array.length-1; i=i+1 ) {
			// i番目以降の最小値の入った要素のインデックスを求める
			var min = i;
			for ( var j=i; j < array.length; j= j+1 ) {
				if ( array[ min ] > array[ j ] ) { min = j; }
			}
			// 最小値の要素とi番目の要素を交換する
			var temp = array[ min ];
			array[ min ] = array[ i ];
			array[ i ] = temp;
		}
	}

	// 数的に小さい順に整列
	numbersort( valuelist );
	document.write( valuelist.toString( )+ "<br>" );

小さい順に並べるソート法には、これ以外に交換法（ バブルソート）、挿入法（ 挿入ソート）、および、より高速なクイックソートなどがあります。

オブジェクトと配列

オブジェクトと配列には、その表現方法をみてもわかるように類似性があります。プロパティが数字のオブジェクトを配列とみることもできます。ただし、「obj.0」「obj.1」や「obj[0]」「obj[1]」などの表現はできませんので気をつけてください。この場合は、「obj["0"]」「obj["1"]」のように表現する必要があります。プロパティは、オブジェクトでは文字列ですが、配列では数字です。

☆練習問題10-1

1. 上の例で出てきた下記のプログラムでは何が表示されるでしょうか?

<script type="text/javascript">

var array = ["佐藤", "鈴木", "田中", "渡辺", "伊藤", "山本"];

var n = 1;
document.write(array[n]);

</script>

2. フォームのテキストエリアに文字列を入力してaddボタンを押すと配列の中身が増え、それの様子が表示されるようなプログラムを作りなさい。
   

   配列への追加

3. 配列datalistのn番目に、指定されたvalueを挿入する関数insertValueを作成しなさい。
4. 配列datalistの最後の５つの要素を取り出す関数lastFiveValuesを作成しなさい。

繰返しの概念再び

さて、繰返しには、while文、do/while文、for文があることを先に述べましたが、実はもう1つあります。for/in文です。ここでは、for/in文および繰返しを制御するbreak文とcontinue文を紹介しましょう。

for in文

上で、for文を使って配列の全ての要素を表示する方法を紹介しました。しかし、もっと良い表現があります。下記のようなものです。

var namelist = [ "佐藤", "鈴木", "田中", "渡辺", "伊藤", "山本" ];


for (var i in namelist ) {
  document.write( i + "番目: " + namelist[ i ] + "<br>" );
}

これはfor in文を使った表現です。for in文ではオブジェクトや配列の全ての要素について繰返しを実行します。つまり、上の例では配列の要素全てに対して、4行目のdocument.write()の行が繰り返されるわけです。ここでiは変数で、繰返しの際にターゲットとなっている要素の名前、プロパティ名が入ります。上の例ではnamelistが配列ですので0から順に数字が入ることになります。

配列だけでなく、オブジェクトのプロパティに対しても同じようなことができます。 下記の例をみてください。

var name = {
  firstName: "Steven",
  middleName: "Paul",
  lastName: "Jobs"
};

for ( var prop in name ) {
  document.write( prop + ": " + name[prop] + "<br>" );
}

上の例を実行すると下記のような結果になります。

この例からわかるように、inの前の変数にはプロパティ名が入り、forブロックの中でそのプロパティ名を使うことが出来るのです。この方法を使うことによって、通常のfor文ではできない、オブジェクトの全てのプロパティにアクセスするという動作が可能になります。

break文とcontinue文と配列の組み合わせ

ループを使っていると、繰返しの途中でそのループを止めたくなったり、繰返しブロックの中の残りの部分を実行せずに次の周回に移りたくなったりすることがあります。このような時に使えるのがbreak文とcontinue文でした。

break文は、繰返しから途中で抜けたくなった場合に利用することができます。もちろん、while文やfor文の条件の部分に条件式を書いて繰返しを終了させるのが王道なのですが、例外処理などで繰返しを途中で抜けたくなった場合にはbreak文を利用しましょう。例えば、ある配列から目的の値(下記の例では「"田中"」)を探したい場合などは次のように書くことができます。この例では、for/in文を使って全ての配列の要素にアクセスしています。その中で「"田中"」という文字列が出てきた場合にはアラートを出して、繰返しを終了しています。ページに出力される名前も「"佐藤"」「"鈴木"」で止まります。もしbreak文がないと、「"伊藤"」の次にある「"田中"」も処理してしまうので、2度アラートが出てくることになりますし、名前も最後までページ上に表示されます。

var array = [ "佐藤", "鈴木", "田中", "渡辺", "伊藤", "田中", "山本" ];

for ( var i in array ) {
  if ( array[ i ] == "田中" ) {
    window.alert( "found!" );
    break;
  }
  document.write(array[ i ] + "<br>");
}

break文は、繰返しループを1つだけ抜けることができます。while文やfor文のような繰返しを使うと、2重3重の繰返し(繰返しの中にさらに繰返しがある)を作る事もできるのですが、その場合、全ての繰返しを抜けるのではなく、1つだけ抜けることができます。

break文は繰返し処理をそこで止めて、繰返しループを抜けてしまいます。一方、continue文は、処理を途中で止めるというところは同じなのですが、繰返し処理自体を止めることはせずに、次の回に移るという部分が異なります。

var array = [ "佐藤", "鈴木", "田中", "渡辺", "伊藤", "田中", "山本" ];


for ( var i in array ) {
  if ( array[ i ] == "田中" ) {
    window.alert( "found!" );
    continue;
  }
  document.write( array[ i ] + "<br>");
}

上の例をみてください。先ほどの例のbreak文がcontinue文に代わったものです。この例では、配列の中に「"田中"」が見つかると、アラートを出し、繰返しの次の回に進みます。このため、「"田中"」の場合には8行目のdocument.write()が実行されることがなく、結果的に配列の中から「"田中"」だけを抜いた名前が表示されます。

☆練習問題10-2

1. 上のbreak文を使った例を実行せよ。
2. 上のcontinue文を使った例を実行せよ。
3. テキストエリアから名前を入力してもらい、予めプログラムの中で用意していた10個の名前を入れた配列の中にその名前があるかどうかを判断するプログラムを作成せよ。名前があった場合にはアラートを出すこと。

文字列

文字列で使えるメソッドは次のようなものがあります。

まずは、slice関数Arrayクラスのjoinと共に使って、区切りの文字を変えてみましょう。

	var places = "東京, 大阪, 京都, 名古屋, 札幌, 福岡, 仙台, 広島";

	// 配列にする
	var placelist = places.split( ", " );
	
	// 区切りの文字を&にする
	var anotherplaces = placelist.join( "&" );
	document.write( anotherplaces + "<br>" );

文字列の部分切り出し

substring/slice関数やsubstr関数で文字列の一部を取り出します。 substrの２番目のパラメータは、文字列の長さということに注意してください。 おなじことを、３つの関数で記述してみました。パラメータの与え方の違いに 注目してみて下さい。

	var sentence = "あたりまえだのクラッカー";
	
	// 最初5文字だけ「あたりまえ」
	var firstfives = sentence.substr( 0, 5 );
	var firstfives = sentence.substring( 0, 5 );
	var firstfives = sentence.slice( 0, 5 );

	// 最後5文字だけ「クラッカー」
	var lastfives = sentence.substr( -5 );
	var lastfives = sentence.slice( -5 );
	var lastfives = sentence.substring( sentence.length-5 );

	// 最初の3文字分だけ外す「まえだのクラッカー」
	var withoutthree = sentence.substr( 3 );
	var withoutthree = sentence.slice( 3 );
	var withoutthree = sentence.substring( 3 );

	// 最後の5文字分だけ外す「あたりまえだの」
	var withoutfives = sentence.substr( 0, sentence.length-5 );
	var withoutfives = sentence.slice( 0, -5 );
	var withoutfives = sentence.substring( 0, sentence.length-5 );

	// 途中の文字「まえだ」
	var maeda = sentence.substr( 3, 3 );
	var maeda = sentence.substring( 3, 6 );
	var maeda = sentence.slice( 3, 6 );
	

次のstartsWith, endsWith関数は、１つ目の文字列が２つ目の文字列で始まる、終わるかを調べます。

	// strの先頭からtargetの長さ分が、targetと等しいかどうか調べる
	function startsWith( str, target ) {
		return str.substring( 0, target.length ) == target;
	}

	// strの最後尾からtargetの長さ分が、targetと等しいかどうか調べる
	function endsWith( str, target ) {
		return str.substr( - target.length ) == target;
	}
	
	var  message = "今日はどうしましょうか？";
	if ( startsWith( message, "今日は" ) ) {
		document.write("今日のことは明日考えましょう。<br>" );
	} 
	if ( endsWith( message, "か？" ) ) {
		document.write( "わかりません。<br>" );
	}
	

文字列の部分取り換え

replace関数を使って文字列の一部を取り換えることができます。ただし、取り換えられた新しい文字列が生成され、元の文字列はそのままであることに注意してください。

	var sentence = "すもももももももものうち";
	
	// 「すももも」→「李も、」
	var changed = sentence.replace( "すももも", "李も、" );
	
	// 「ももも」→「桃も」 「ももの」→「桃の」
	var allchanged = changed.replace( "ももも", "桃も" ).replace( "ももの", "桃の" );
	

replaceの３番目に付けることができる"g"のオプションはすべてを取り換えるという指定になります。

	var sentence = "うりうりがうりうり帰るうりうりの声";
	
	// すべての「うりうり」→「瓜売り」
	var replaced = sentence.replace( "うりうり", "瓜売り", "g" );
	

次のformat関数は、文字列のなかで%dで始まる部分を、受け取った配列の要素で置き換えていきます。

	function format( str, values ) {
		var result = new String( str );
		 for ( var i=0; true; i = i + 1 )  {
			if ( result.indexOf( "%d" ) <0 ) { break; }
			result = result.replace( "%d", values[ i ] );
		}
		return result;
	}
	
	var r = format( "気温は%d℃で、湿度は%d%です。", [ 32, 50 ] );

☆練習問題10-3

1. 名詞の単数形を受け取り複数形を返すplural関数を作成せよ。 通常は「s」を語尾につけるだけだが、単語の終わりが「s」,「x」,「ch」,「sh」で終わる単語は、 「es」を語尾に付ける。また、単語の終わりが「子音+y」で終わる単語は、「y」を取り除いて、 「ies」を語尾に付ける。力量があれば、「sheep」,「axis」,「person」,「tooth」,「ox」,「man」などの 特殊な複数形を持つ単語にも対処せよ。
2. 通常の英語の文を、疑問形にして返すquestionable関数を作成せよ。
3. format関数の仕様を拡張して、%nd（nは数字）だったら、n桁（n桁なければ空白で左側を埋める）で 数値を表示させたり、%0nd（nは数字）だったら、n桁なければ「0」で左側を埋める、という形で表示 できるようにしてみなさい。