JavaScript 文字列操作のソースを表示新しいページはコチラ

[[JAVA Script#リファレンス]]に戻る。
　

文字列も配列として管理されているのですが、JavaScriptでは、あまり配列を意識せずに一つの変数のなかに文字列、文章を格納することができます。文字列オブジェクト変数として定義された変数に対しては、文字列を扱いやすくするためのメソッドが準備されていて、様々な操作ができるようになっています。文字列をどのように変数として扱うオブジェクトにするのか、どういった操作ができて、どういうふうに使うことができるのかをひとつづつを確認していきたいと思います。


== '''文字列オブジェクトの生成 String''' ==
文字列オブジェクト(入れ物・モノ)を生成するには、以下のように定義します。
*Data1Arr = new String() //空の文字列
*Data2Arr = new String("JavaScriptは楽しい。まるで麻薬のようだ。")//もちろん文字列で初期化できます。
*Data3Arr = new String(20160712) //数値も文字列として格納します。 


2番目は2ちゃんねるのAA板でみかけた印象的なスレッドで、”チャーハンはおいしい。まるで麻薬のようだ。”から引用しています。ストーリー系のAAスレッドで、とにかくオチがチャーハンを作る流れになっていて最後は上記のキーワードで終わるという、素晴らしいストーリーが無数にあったのを思い出します。java scriptを真剣に学ばれているみなさんからすれば、どうでもいいですね。


サンプルプログラムは以下のとおりです。


<syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript Array</TITLE>
</HEAD>
<BODY>
JavaScript Array<br />
<SCRIPT Language="JavaScript">
<!--
strData1 = new String();
strData2 = new String("java scriptは楽しい。まるで麻薬のようだ。");
strData3 = new String(771);

strData3 = strData3 + 7;

document.write("■String<br />");
document.write("strData1 = ", strData1, "<br />");
document.write("strData2 = ", strData2, "<br />");
document.write("strData3 = ", strData3, "<br />");

-->
</SCRIPT>
</BODY>
</HTML>
</syntaxhighlight>

[[Media:JavaScript String 01 declare.html|サンプル実行結果]]

== '''文字列の出力時装飾系メソッド ''' ==
文字列出力の装飾処理として、ここに記述するようなメソッドがありますが、もっと詳細なフォントやテキスト表示制御を指定するための方法として、DOM(ドキュメントオブジェクトモデル)という巨大な構造を持つオブジェクトとしてテキストを扱う方法があります。こちらではXMLのようなHTMLそのものともいえるマークアップ構造自体を制御するためのメソッドまで含まれており、より高度な制御が可能になります。ここではStringオブジェクトとして準備されている単純なメソッドのみを紹介します。


document.writeなどの出力命令時に指定しなければ、無視されてしまいます。そのことは最初の項目のハイパーリンクで示したいと思います。また、メソッドは例えばstrDataというStringオブジェクトを作った場合には、strData.link("<nowiki>http://…　…</nowiki>")のようになっていますが、2重引用符リテラルもStringオブジェクトとして扱われるため、"SampleQuarta".link("<nowiki>http://…　…</nowiki>")のように利用することもできます。また、複数の装飾指定をする場合はstrData.bold().italic() のように連続してメソッドを記述することができます。オブジェクトのプロトタイプの循環を使ったメソッドの利用になっていますが、細かい仕組みまでは理解する必要はないでしょう。


=== ハイパーリンク link ===
以下のように引数にハイパーリンクを指定することになっています。
*strData1.link("<nowiki>http://www.yo-net.jp/yonewiki/index.php?title=JAVA_Script#.E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9</nowiki>")


サンプルスクリプト
<syntaxhighlight lang="javascript" line start="1">
strData1 = new String("java script リファレンス 目次");
document.write(strData1.link("http://www.yo-net.jp/yonewiki/index.php?title=JAVA_Script#.E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9"), "</BR>");
strData1.link("http://www.yo-net.jp/yonewiki/index.php?title=JAVA_Script#.E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9");
document.write(strData1, "</BR>");
</syntaxhighlight>


表示結果:

<yjavascript>
strData1 = new String("java script リファレンス 目次");
document.write(strData1.link("http://www.yo-net.jp/yonewiki/index.php?title=JAVA_Script#.E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9"), "</BR>");
strData1.link("http://www.yo-net.jp/yonewiki/index.php?title=JAVA_Script#.E3.83.AA.E3.83.95.E3.82.A1.E3.83.AC.E3.83.B3.E3.82.B9");
document.write(strData1, "</BR>");
</yjavascript>

=== フォント色 fontcolor===
*strData2.fontcolor("blue");
*strData3.fontcolor("FA8072");//salmon サーモンピンク 16進数RGB指定


上記のように、引数で色名(X11 Colorで定義されているものが一般的でおよそ140種類。詳しくは本家wikipediaの[https://ja.wikipedia.org/wiki/X11%E3%81%AE%E8%89%B2%E5%90%8D%E7%A7%B0 X11の色名称]説明に譲る)を指定したり、16進数RGB(000000～FFFFFF)で指定することができます。


サンプルスクリプト
<syntaxhighlight lang="javascript" line start="1">
strData2 = new String("フォント色の指定(fontcolor) Navy 000080");
strData3 = new String("フォント色の指定(fontcolor) 191970 MidnightBlue");

document.write(strData2.fontcolor("Navy"), "</BR>");
document.write(strData3.fontcolor("191970"), "</BR>");
</syntaxhighlight>


表示結果:

<yjavascript>
strData2 = new String("フォント色の指定(fontcolor) Navy 000080");
strData3 = new String("フォント色の指定(fontcolor) 191970 MidnightBlue");

document.write(strData2.fontcolor("Navy"), "</BR>");
document.write(strData3.fontcolor("191970"), "</BR>");
</yjavascript>

=== フォントサイズ fontsize===
*strData4.fontsize(1);//1～7の7段階。小 1 ⇔ 7 大

上記のように引数にフォントサイズを1～7の7段階で指定します。非常にあいまいなサイズ指定ですが、使っている人の基準に対して指定するような昔ながらのユーザフレンドリーな指定となっています。ほんとか？Webデザイナーはあまり使わないかもしれませんね。


サンプルスクリプト
<syntaxhighlight lang="javascript" line start="1">
strData4 = new String("フォントサイズの指定(fontsize)");

for(i = 1;i < 8;i++){ 
    document.write(strData4.fontsize(i), i, "</BR></BR>");
}
</syntaxhighlight>


表示結果:

<yjavascript>
strData4 = new String("フォントサイズの指定(fontsize)");

for(i = 1;i < 8;i++){ 
    document.write(strData4.fontsize(i), i, "</BR></BR>");
}
</yjavascript>

=== 大きくする big ===
*strData5.big();


上記のように引数には何も指定できません。文字を大きくするというあいまいな指定です。ブラウジングしている人の基準のフォントサイズに対して、.big()と一段階だけ大きくするという指定から.big().big().big().big().big().big().big()のように多段階に大きくするという指定までできるわけです。表示結果がどうなるかは、閲覧している人のブラウザの設定次第ということになります。改行幅設定や画面サイズの問題もあって、表示がぐちゃぐちゃになるという可能性もあるユーザフレンドリーな手法です。どこが？


サンプルスクリプト
<syntaxhighlight lang="javascript" line start="1">
strData5 = new String("フォントサイズを大きくする(big)");

document.write(strData5.big(), 1, "</BR></BR>");
document.write(strData5.big().big(), 2, "</BR></BR>");
document.write(strData5.big().big().big(), 3, "</BR></BR>");
document.write(strData5.big().big().big().big(), 4, "</BR></BR>");
document.write(strData5.big().big().big().big().big(), 5, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big(), 6, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big().big(), 7, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big().big().big(), 8, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big().big().big().big(), 9, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big().big().big().big().big(), 10, "</BR></BR>");
document.write("あ".big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big(), 20, "</BR></BR>");

</syntaxhighlight>


表示結果:

<yjavascript>
strData5 = new String("フォントサイズを大きくする(big)");

document.write(strData5.big(), 1, "</BR></BR>");
document.write(strData5.big().big(), 2, "</BR></BR>");
document.write(strData5.big().big().big(), 3, "</BR></BR>");
document.write(strData5.big().big().big().big(), 4, "</BR></BR>");
document.write(strData5.big().big().big().big().big(), 5, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big(), 6, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big().big(), 7, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big().big().big(), 8, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big().big().big().big(), 9, "</BR></BR>");
document.write(strData5.big().big().big().big().big().big().big().big().big().big(), 10, "</BR></BR>");
document.write("あ".big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big().big(), 20, "</BR></BR>");

</yjavascript>

=== 小さくする small ===
*strData6.small()


と、上記のように引数は設定できません。bigのときと同じように利用することができます。


サンプルスクリプト
<syntaxhighlight lang="javascript" line start="1">
strData6 = new String("フォントサイズを小さくする(small)");

document.write(strData6.small(), 1, "</BR></BR>");
document.write(strData6.small().small(), 2, "</BR></BR>");
document.write(strData6.small().small().small(), 3, "</BR></BR>");
document.write(strData6.small().small().small().small(), 4, "</BR></BR>");
document.write(strData6.small().small().small().small().small(), 5, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small(), 6, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small().small(), 7, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small().small().small(), 8, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small().small().small().small(), 9, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small().small().small().small().small(), 10, "</BR></BR>");
document.write("C".small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small(), 20, "</BR></BR>");

</syntaxhighlight>


表示結果:

<yjavascript>
strData6 = new String("フォントサイズを小さくする(small)");

document.write(strData6.small(), 1, "</BR></BR>");
document.write(strData6.small().small(), 2, "</BR></BR>");
document.write(strData6.small().small().small(), 3, "</BR></BR>");
document.write(strData6.small().small().small().small(), 4, "</BR></BR>");
document.write(strData6.small().small().small().small().small(), 5, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small(), 6, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small().small(), 7, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small().small().small(), 8, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small().small().small().small(), 9, "</BR></BR>");
document.write(strData6.small().small().small().small().small().small().small().small().small().small(), 10, "</BR></BR>");
document.write("C".small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small().small(), 20, "</BR></BR>");

</yjavascript>

=== 点滅させる blink ※無効ブラウザばかりです。 ===
*strData7.blink()


上記のように引数は指定できません。文字列が点滅する装飾は近年、ブラウザでは対応されなくなっています。なんで？体に良くない人もいるという点とイライラする人が多いという装飾だからみたいです。文字が横に流れるマーキーというのも評判がイマイチでしたが復活の兆しです。こういうのがあったという歴史的知識とこういうのも使えるパターンがあるという知識になるでしょうか？


サンプルスクリプト
<syntaxhighlight lang="javascript" line start="1">
strData7 = new String("文字の点滅_非対応ブラウザ多いです。(blink)");

document.write(strData7.blink(), "</BR>");
</syntaxhighlight>


表示結果：

<yjavascript>
strData7 = new String("文字の点滅_非対応ブラウザ多いです。(blink)");

document.write(strData7.blink(), "</BR>");

</yjavascript>

=== 太くする bold ===
*strData8.bold()


上記のように引数はありません。文字が太くなります。身体は…みんなそれぞれです。健康管理に気を付けましょう。それ、面白いと思って言ってんの？


サンプルスクリプト
<syntaxhighlight lang="javascript" line start="1">
strData8 = new String("文字を太くする(bold)");

document.write(strData8.bold(), "</BR>");
</syntaxhighlight>


表示結果：

<yjavascript>
strData8 = new String("文字を太くする(bold)");

document.write(strData8.bold(), "</BR>");

</yjavascript>

=== 固定幅フォント fixed ===
*strData9.fixed();


上記のように引数はありません。固定幅フォントを適用します。このフォントはブラウザ側で固定幅フォントならこのフォントを使うと設定されています。でも固定幅のフォントできっと表示されているんだろうな。と、そういうことです。ユーザの思う。ユーザが好きなフォントで表示されているかもしれないし、ブラウザの設定のことなんて知らない人がほとんどで、デフォルトで設定されているアレなフォントで表示されていて不快になっているかもしれないと、いろいろ考え、推測することはできます。そういった想像力が大事です。自分なんかは、常に固定幅フォントが優先されるようにブラウザの設定をしているので、そういう人もいるってことです。フォントへのこだわりってのは人それぞれですね。心安らぐフォントは人それぞれ。特に指定されたフォントで表示されないとまずいってことが無い限りは、自分の好きなフォントで表示したい。そういうことです。ブラウザ用。コーディング用。作業用。いろいろ使い分けています。そういう人もいるということです。


サンプルスクリプト
<syntaxhighlight lang="javascript" line start="1">
strData9 = new String("文字の固定幅フォント適用(fixed)");

document.write(strData9.fixed(), "</BR>");
</syntaxhighlight>


表示結果：

<yjavascript>
strData9 = new String("文字の固定幅フォント適用(fixed)");

document.write(strData9.fixed(), "</BR>");
</yjavascript>

=== 斜体文字 italics ===
*strData10.italics()


上記のように引数は設定できません。斜体文字になります。基本的には見ずらい形状になると考えていいと思いますが、一部英語フォントなんかではカッコよくなるやつもあります。センスが必要です。基本的に日本語が斜めになった場合は、目立つ以外の利点はないとおもっていますが、考え方はひとそれぞれでしょう。斜体が好きな人もいるかもしれません。自分は、たいてい嫌いですね。斜めにして読みにくくしたい！くらいの非常事態にしか使いたくないです。それか、分類のアイデアが枯渇して苦し紛れの装飾になったり、人から言われて、とか…ですね。ちなみに斜めにならないフォントを使っているブラウザ設定もあるので、その点まで考慮しておく必要はあるでしょう。


サンプルスクリプト
<syntaxhighlight lang="javascript" line start="1">
strData10 = new String("文字の斜体化(italics)");

document.write(strData10.italics(), "</BR>");
</syntaxhighlight>


表示結果：

<yjavascript>
strData10 = new String("文字の斜体化(italics)");

document.write(strData10.italics(), "</BR>");

</yjavascript>

=== 取り消し線 strike ===
*strData11.strike()


上記のように引数は設定できません。取り消し線が引かれます。文字のおおよそ中心あたりをとおるように線がひかれると思ってよいでしょう。どうしても、線の引かれる位置まで気にする場合は、別の方法を考えなければなりません。


サンプルスクリプト
<syntaxhighlight lang="javascript" line start="1">
strData11 = new String("文字の取り消し線(strike)");

document.write(strData11.strike(), "</BR>");
</syntaxhighlight>


表示結果：

<yjavascript>
strData11 = new String("文字の取り消し線(strike)");

document.write(strData11.strike(), "</BR>");

</yjavascript>

=== 下付き文字 sub ===
*strData12.sub()


上記のように引数は設定できません。下付きの小さい文字になります。自分だったら文章の感情を表現する程度で使うかもしれませんが、面倒なのであまり使いませんね。


サンプルスクリプト
<syntaxhighlight lang="javascript" line start="1">
strData12 = new String("文字の下付き(sub)");

document.write(strData12,strData12.sub(), "</BR>");
</syntaxhighlight>


表示結果：

<yjavascript>
strData12 = new String("文字の下付き(sub)");

document.write(strData12,strData12.sub(), "</BR>");

</yjavascript>

=== 上付き文字 sup ===
*strData12.sup()


上記のように引数は設定できません。上付きの小さい文字になります。引用とか注釈とか累乗とかの表現で使いますでしょうか。


サンプルスクリプト
<syntaxhighlight lang="javascript" line start="1">
strData13 = new String("文字の上付き(sup)");

document.write(strData13,strData13.sup(), "</BR>");
</syntaxhighlight>


表示結果：

<yjavascript>
strData13 = new String("文字の上付き(sup)");

document.write(strData13,strData13.sup(), "</BR>");

</yjavascript>


== '''文字列長さ(文字列変数長さ探索) length ''' ==
*nLengthValue = strData14.length

上記のように記述すると文字列の長さを取得できます。全角文字でも1文字だし、半角文字でも1文字です。混在していても、全角文字半角文字を個別にカウントして、その長さを返してくれます。


サンプルスクリプト
<syntaxhighlight lang="javascript" line start="1">
strData14 = new String("文字数をcountできる .length");

document.write(strData14, " ,文字数 = ", strData14.length, "</BR>");
</syntaxhighlight>


表示結果：

<yjavascript>
strData14 = new String("文字数をcountできる .length");

document.write(strData14, " ,文字数 = ", strData14.length, "</BR>");

</yjavascript>

== '''文字コード変換(1文字→ISO Latin-1コード) charCodeAt ''' ==
文字は文字コード表との対応によって1バイト文字なら8桁の2進数で表せる256文字(0番～255番)が表現できるように構成されていて、[https://ja.wikipedia.org/wiki/ISO/IEC_8859-1 ISO/IEC 8859-1(俗にLatin-1と呼ばれているモノ)]という国際標準文字コードでの対応表に基づいて変換を行うことができるメソッドです。ちなみにISO/IEC 8859-1とISO 8859-1とは同じ意味ですが、ISO 8859-1とISO-8859-1とWindows-1252とは別モノの文字コード体系を指します。


*"@akairo_no_sora".charCodeAt(0)


上記のように、引数は一つ設定できます。


*第一引数:このメソッドの元の文字列に対して、ISO Latin-1に変換したい文字のポジション。ポジション先頭番号は0。



サンプルスクリプト
<syntaxhighlight lang="javascript" line start="1">
strData15 = new String("@akairo_no_sora");

document.write(strData15, " ,文字コード変換 ->");
for(n = 0;n < strData15.length;n++){ 
    document.write(strData15.charCodeAt(n), ", ");
}
document.write("</BR>");

</syntaxhighlight>


表示結果：

<yjavascript>
strData15 = new String("@akairo_no_sora");

document.write(strData15, " ,文字コード変換 ->");
for(n = 0;n < strData15.length;n++){ 
    document.write(strData15.charCodeAt(n), ", ");
}
document.write("</BR>");
</yjavascript>


上記のようにfor文による繰り返し処理で、文字列すべてのコード変換ができます。aに相当する2番目、4番目そして、最後の文字のコード番号が一緒になっていることが確認できると思います。

== '''文字コード変換(ISO Latin-1コード→文字列) fromCharCode ''' ==


== '''大文字小文字変換 toLowerCase ''' ==


== '''小文字大文字変換 toUpperCase ''' ==


== '''文字列検索(表示コンテンツ内検索) find ''' ==


== '''文字列検索(文字列変数先頭検索) IndexOf ''' ==


== '''文字列検索(文字列変数後方検索) lastIndexOf ''' ==


== '''文字列正規表現検索(返却値が一致文字列) match ''' ==


== '''文字列正規表現検索(返却値が文字位置) search ''' ==


== '''文字列正規表現置換(返却値は置換後文字列) replace ''' ==


== '''文字列位置による抽出(返却値は抽出文字) charAt ''' ==


== '''文字列位置区間(後方位置指定可能)による抽出(返却値は抽出文字列) slice ''' ==


== '''文字列位置区間による抽出(返却値は抽出文字列) substring ''' ==


== '''文字列位置と文字数による抽出(返却値は抽出文字列) substr ''' ==


== '''文字列中の文字による分割(返却値は文字列配列) split ''' ==
[[JAVA Script#リファレンス]]に戻る。