JavaScript プログラミング
前へ 目次へ 次へ 

　６．文字列の処理

　文字列は"+"演算子で連結することができる。このように、文字列に対する処理を学習する。

(1) 大文字・小文字変換
　英字の大文字を小文字に変換、逆に小文字を大文字に変換する。

toUpperCase 小文字を大文字に変換する。 "JavaScript".toUpperCase(); → JAVASCRIPT
toLowerCase 大文字を小文字に変換する。 "JavaScript".toLowerCase(); → javascript

　1行テキストに入力した文字列の英小文字を大文字に変換し、別の1行テキストに表示する。

　フォームを1つ用意し、入力部品を配置（左図参照）する。
　フォームはname="rei9"とする。
　・1行テキスト　…　size="20" type="text" name="before"
　・1行テキスト　…　size="20" type="text" name="after"
　・ボタン　…　type="button" value="大文字変換" イベント:OnClick

HTMLリスト　[[jsrei9.html]]

<HTML>
<HEAD>
<TITLE>大文字に変換</TITLE>
</HEAD>
<BODY>
<P>大文字に変換</P>
<FORM name="rei9">
<INPUT size="20" type="text" name="before">
<INPUT type="button" value="大文字変換"
  onclick="document.rei9.after.value=document.rei9.before.value.toUpperCase();">
<INPUT size="20" type="text" name="after">
</FORM>
</BODY>
</HTML>

　関数にするほどでもないので、イベントonclickのアクションとして書いている。

　1行テキストbeforeに入力された文字列は、document.rei9.before.value で参照できる。

document. rei9. before. value
このドキュメントの rei9フォームの beforeの valueプロパティ

オブジェクトの省略
　ここで、ボタンは1行テキストと同じフォームにあり、2つある1行テキストは名前で特定できるので、次のようにdocument.rei9を省略することができる。

　　　　onclick="after.value=before.value.toUpperCase();"


問題　document.rei9の部分を省略してプログラムし、結果を確認しなさい。

問題　1行テキストに入力した文字列の英大文字を小文字に変換し、別の1行テキストに表示する。



(2) 文字列の長さ
　文字列の長さ、すなわち文字の個数を調べる。全角文字も1文字としてカウントされる。

length 文字列の長さを返す。 "JavaScript".length; → 10

　1行テキストに入力した文字列の長さを調べ、別の1行テキストに表示する。

　フォームを1つ用意し、入力部品を配置（左図参照）する。
　フォームはname="rei9b"とする。
　・1行テキスト　…　size="20" type="text" name="moji"
　・1行テキスト　…　size="20" type="text" name="nagasa"
　・ボタン　…　type="button" value="文字列長" イベント:OnClick

HTMLリスト　[[jsrei9b.html]]

<HTML>
<HEAD>
<TITLE>文字列の長さ</TITLE>
</HEAD>
<BODY>
<P>文字列の長さ</P>
<FORM name="rei9b">
<INPUT size="20" type="text" name="moji">
<INPUT type="button" value="文字列長" onclick="nagasa.value=moji.value.length;">
<INPUT size="20" type="text" name="nagasa">
</FORM>
</BODY>
</HTML>


(3) 文字を取り出す
　文字列の中から指定した位置の1文字または1文字以上を取り出す。

charAt 1文字を取り出す。 "JavaScript".charAt(4); → S 文字列の先頭を
0番目と数える。
slice 指定範囲の文字列を取り出す。 "JavaScript".slice(4,7); → Scr
substring 　　　〃 "JavaScript".substring(4,7); → Scr

　フォームを1つ用意し、入力部品を配置（下図参照）する。
　フォームはname="rei9c"とする。
　・1行テキスト　…　size="20" type="text" name="moji"
　・1行テキスト(8個)　…　size="5" type="text" name=（下図参照）
　・ボタン(3個)　…　type="button" value=（下図参照） イベント:OnClick

HTMLリスト　[[jsrei9c.html]]

<HTML>
<HEAD>
<TITLE>m文字列取り出し</TITLE>
</HEAD>
<BODY>
<P>文字を取り出す</P>
<FORM name="rei9c">
文字列=<INPUT size="20" type="text" name="moji" value="JavaScript"><BR>
<BR>
<INPUT size="5" type="text" name="pnt1">文字目は
<INPUT size="5" type="text" name="moji1">です。
<INPUT type="button" value="charAt 実行"
  onclick="moji1.value=moji.value.charAt(pnt1.value);"><BR>
<BR>
<INPUT size="5" type="text" name="s1">文字目から
<INPUT size="5" type="text" name="s2">文字目までは
<INPUT size="5" type="text" name="s3">です。
<INPUT type="button" value="slice 実行"
  onclick="s3.value=moji.value.slice(s1.value,s2.value);"><BR>
<BR>
<INPUT size="5" type="text" name="ss1">文字目から
<INPUT size="5" type="text" name="ss2">文字目までは
<INPUT size="5" type="text" name="ss3">です。
<INPUT type="button" value="substring 実行"
  onclick="ss3.value=moji.value.substring(ss1.value,ss2.value);"><BR>
</FORM>
</BODY>
</HTML>

問題　文字を1文字ずつ表示する。元の文字列は"JavaScript"とする。

サンプル
1文字ずつ表示

　関数の外で宣言している変数(point, str, obj)はグローバル変数（次のページで説明）となり、すべての関数で参照でき、値も保持（記憶）し続ける。
　ボタンのアクションの1つ目 obj=moji; は出力用1行テキストのオブジェクトを設定している。2つ目 moji1(); は関数の呼び出しである。3つ目 kaishi.disabled=true; はボタンを無効にする処理である。


(4) その他

indexOf 文字列を検索する。 "JavaScript".indexOf("Scr",0); → 4　／無いときは -1
replace 文字列を置き換える。 "JavaScript".replace("ava","AVA"); → JAVAScript
split 指定文字で分割する。 ss="I'm learning JavaScript".split(" ");
 ssが配列→ss[0]="I'm" ss[1]="learning" ss[2]="JavaScript"
 ssが変数→ss="I'm,learning,JavaScript"


前へ 目次へ 次へ 
 JavaScript プログラミング Copyright © 2003 Hiroshi Masuda 

 

 

inserted by FC2 system