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("http://…　…")のようになっていますが、2重引用符リテラルもStringオブジェクトとして扱われるため、"SampleQuarta".link("http://…　…")のように利用することもできます。また、複数の装飾指定をする場合は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"));
document.write(strData3.fontcolor("191970"));
</syntaxhighlight>


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

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

=== フォントサイズ fontsize===
=== 大きくする big ===
=== 小さくする small ===
=== 点滅させる blink ※無効ブラウザばかりです。 ===
=== 太くする bold ===
=== 固定幅フォント fixed ===
=== 斜体文字 italic ===
=== 取り消し線 strike ===
=== 下付き文字 sub ===
=== 上付き文字 sup ===


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