文字列処理 


1 文字列の記述

 JavaScriptのなかで文字列のデータ型はStringになります。
文字列とはダブルクオーテーション「"」で囲んだテキストでJavaScriptの中で頻繁に使用されます。
例 var s = "東京都";
   var p = "3.14";  // pは数値としてではなく、文字列として扱われます。
  

例 html文
  <a href="#" onClick="Myfunc('parameter')">Myfunc("parameter")をcallする</a>

  文字列の中に別の文字列が入れ子の形に入る場合、内側の文字列をシングルクオテーション「'」で囲みます。

この例題を見る

2 文字列の連結
 文字列演算子の箇所でも述べましたが、文字列の連結には+演算子を使用します。
例 var str = "茨城県" + "水戸市";
  変数 strは"茨城県水戸市"となります。
例 文字列と数値の連結 両方とも文字列として扱われます。
  var p = Math.sqrt(2);
  var s = "2の平方根は";
  document.write(s + p, "<br>"); この結果を見る

3 indexOf
 文字列の中から特定の文字列を検索する場合に使用します。
 構文
  文字列A.indexOf("文字列B",開始index);

 文字列Aの中から、文字列Bと一致する場所を見つけ、その見つかった文字列Aの位置を返します。
 一致しない場合、-1が返されます。
 開始indexは検索する開始場所を指定するもので、指定しない場合、文字列Aの先頭位置から検索が開始されます。

 var s = "abcABdef135bcBCadef";
 var n = s.indexOf("bc");
 document.write("n = ", n, "<br>");
 n = s.indexOf("bc",n+1);
 document.write("n = ", n, "<br>");
 document.write("n = ", s.indexOf("bc",n+1), "<br>");

この例題の結果を見る

例 漢字混じりの文字列検索
 var bun = "文字列Aの中から、文字列Bと一致する場所を見つけ、その見つかった文字列Aの位置を返します。";
 var n = bun.indexOf("中から");
 document.write("n = ", n, "<br>");

 この例題の結果を見る

4 split

 文字列を特定の文字列を境界に切り分けて、それぞれを配列データ要素として格納します。

 結果を見る

5 escape

 サーバへ文字列ヲパラメータとして送信する場合、文字化けなどを防止するために送信文字列を送信可能な文字列に
エンコードします。英数字以外の文字列は%xxの形式に変換されます。
この処理により、全角の日本語もスペースなども送信可能となります。
 encodeされた文字列を元にもどすにはunescape関数を使用します。

 var w = prompt("日本語の文章を入力","");
 var u = escape(w);
 document.write("escape関数で処理 " + u + "<br>");
 v = unescape(u);
 document.write("unescape関数で元に戻す。" + v);

escape関数での変換結果を見る

6 unescape
 encodeされている文字列を元に戻す関数です。

7 文字列のフォント、スタイル、色

 文字列はStringオブジェクトのインスタンスです。
文字列のフォント、スタイルの設定はStringオブジェクトが提供しているメソッドを利用して設定します。
また、html文の<font>タグでも指定が可能です。

Stringオブジェクトのメソッド
method 説明 対応するhtmlタグ
anchor() 文字列にハイパリンクのjump先を設定 <a name="...">
big() 文字列を大きな文字列にします。 <big>
blink() 文字列を点滅させます。
bold() 文字列を太字にします。
charAt(n) 文字列のn番目の文字を返します。
fixed() 文字列を等幅属性に設定
fontcolor(color) 文字列の文字色を設定 <font color="...">
fontsize(size) 文字列の文字フォントサイズを設定 <font size="...">
indexOf(s, n) 文字列の中に文字列sが含まれるか検索
n は開始インデックス (オプション)
検索方法 前方から 3項 参照
italics() 文字列を斜体にします。
lastIndexOf(s, n) 機能はindexOfと同じ、但し検索は文字列の後方から行います。
link(attribute) 文字列にハイパーリンクを設定
small() 文字列を小さな文字列にします。 <small>
sub() 文字列を下付き文字にする。 <sub>
substring(n1, n2) 文字列のn1番目からn2番目までの文字列を返します。
sup() 文字列を上付き文字にする。 <sup>
toLowerCase() 文字列を全て小文字にする。
toUpperCase() 文字列を全て大文字にする。
split(separator) 文字列をseparatorで分割し配列要素として格納
4 項 参照

上記メソッドをテストするプログラム
var strt = "文書の先頭";
var icu = "茨城キリスト教大学"
var adrs1 = "茨城県日立市大甕町6-1-1";
var icue = "Ibaraki Christian University";
document.write(strt.anchor("start"));
document.write("start anchorを設定");
document.write("<hr>");
// 文字列サイズ
document.write("最初の文字列<br>");
with(document){
write("icu = ", icu, "<br>");
write("adrs1= ", adrs1, "<br>");
write("icue = ", icue, "<hr>");
}
document.write("big = ", icu.big(), "<br>");
document.write("small = ", icu.small(), "<br>");
document.write("sub = ", icu.sub(), "<br>");
document.write("sup = ", icu.sup(), "<br>");
document.write("bold = ", icu.bold(), "<br>");
document.write("blink= ",icu.blink(), "<br>");
document.write("fixed = ", icu.fixed(), "<br>");
document.write("italics = ", icu.italics(), "<br><hr>");
document.write("FontsizeとfontColorを指定","<br>");
document.write("fontsize=14 ",icue.fontsize(14), "<br>");
document.write("fontColor('blue') = ",icue.fontcolor("blue"), "<hr>");
document.write("upperCaseとlowerCase","<br>");
document.write("toUpperCase = ", icue.toUpperCase(), "<br>");
document.write("toLOwercase = ", icue.toLowerCase(), "<br><br>");
document.write("部分文字列の抽出","<br>");
document.write("substring(8,17) = ", icue.substring(8,17),"<br>");
document.write("substring(3,6) = ", adrs1.substring(3,6), "<br>");
document.write("charAt(1) = ", icue.charAt(1), "<br>");
document.write("charAt(2) = ", adrs1.charAt(2), "<hr>");
document.write("文字列の後ろから検索","<br>");
document.write("icue.lastIndexOf('Uni') = ", icue.lastIndexOf("Uni"), "<br>");
var modoriText = "JavaScript目次に戻る";
document.write(modoriText.link("../JVscriptIntro.htm"));

上記各メソッドのテスト結果をみるにはここをクリック

8 文字列への変換
 数値オブジェクトを文字列に変換は自動的に行われる場合が多いのですが、明示的に変換を指示することが、できます。
また、文字列を数値データに変換する関数も用意されています。
 (1) 自動変換
 document.writeは通常、文字列を引数に取ります。この場合、この引数は「文字列文脈」になります。

 文字列文脈の中の数値データは自動的に10進文字列に変換されます。
 文字列文脈の中の論理データはtrue または falseの文字列に変換されます。
 文字列文脈の中の日付データは自動的に変換されます。
 文字列文脈の中のnullデータはnull文字列に変換されます。
 例 document.write("answer = ", 2+3, "<br>"); // answer = 5   結果を見る
 例 document.write("mixed data type = ", "abc" + Math.sqrt(3), "<br>"):
 結果を見る
 例 var dt = new Date();
    document.write("今日の日付と時刻は =", dt, "<br>");
 結果を見る
 例 var y = true;
    document.write("y = ", y, "<br>");
 例 document.write("null data = ",null, "<br>");
 問題 上記2例を検証せよ。
 (2) 明示的変換 toString()
 構文
  object.toString()
 オブジェクトobjectを文字列に変換して返します。
 objectが関数の場合、関数を定義するソースリストが返されます。
 例 function squareOfCircle(radius){
    return(Math.PI * radius*radius;
    }
   ...
   document.write(squareOfCircle.toString());
 結果1  結果2
 日付オブジェクトはtoStringを用いて文字列に変換することもできます。。

9 数値データへの変換 
 (1) 自動変換
 数値文脈の中での数値を表す文字列は自動的に数値データに変換されます。
 例 var s = "2";
    document.write("s = ", Math.sqrt(s), "<br>");
 (2) parseInt
 数値を表す文字列を整数値に変換します。
 構文
  parseInt(srtingObject [,n])
  
 stringObjectをn進数値データを表す文字列と見なします。nが省略されたとき、10進データ文字列。
 変換結果は10進数となります。
 変換が不可能な場合NaN Not a Numberが返されます。
 n = 2, 8, 10, 16 のどれかの値、または省略
 例 document.write("1.2 = ", parseInt("1.2"), "<br>"); 結果を見る
 例  ParseInt例題
 (3) parseFloat()
 数値を表す文字列を浮動小数点数値に変換します。
 例 document.write("3.1425e2 = ", parseFloat("3.1415e2"), "<br>");
  上記parseFloat例題を検証せよ。
10 日付データの内部表現形式に変換
 Date.parse("日付を表す文字列")
 例 document.write(Date.parse("6,June,2002"));
この日付の内部表現は


 JavaScript目次に戻る