webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

JavaScriptによる文字列操作

今後少しずつ複雑なJavaScriptに入ってきますが、その前にJavaScriptによる文字列操作のルールと、デバック(エラーチェック)の際に使用するコンソールログ関数の使い方を覚えましょう。

console.log

console.log関数とは文字通り、コンソール画面にログ(記述したスクリプト内容)を表示させる為に使う関数です。
自身の好きなタイミングで変数やオブジェクトの中身の値を確認できる為、正しい道順でプログラムが動いているか、途中途中で確認する事が出来ます。CSSの時と同じように、まずは「ミスをしない」よりも「ミスを自身で見つけられる」ようになりましょう。

使い方

確認したい変数などを「console.log(' ');」の中に入れて、Webブラウザの開発ツールのコンソールを立ち上げて各種ログを確認できます。

例えばChromeではデバッグしたいWebページを表示した状態でF12キー(もしくは検証モード)を押下し,上部のメニューからconsoleを選択します。

記述例

<script>
 
var a = 10

console.log('a');
 
</script>

文字列操作

JavaScriptで文字を扱う際には注意が必要です。文字列を表示させる場合は必ずシングルコーテーションかダブルコーテーションで囲みます。逆に言うと、数字であってもコーテーションで囲めばそれは文字と認識されてしまいます。また文字列と文字列を繋げたい場合には「+」で繋げます。



下記の2つの計算式の違いを理解しましょう。

<script>
var a = 12 + 34;
var b = '12' + '34';

document.write(a);

document.write(b);
</script>

文字列と文字列、または変数と文字列を連結させたい場合、JavaScriptでは「+」を使って連結させます。

<script>
      var x = 'こんにちは';
      var y = 'よろしくお願いします。'
      document.write(x + y);
    </script>

もしくは

<script>
      var x = 'こんにちは';
      document.write(x + 'よろしくお願いします。');
    </script>


プログラムを記述していく中で、文字列のなかで改行したい場合や、スペースを入れたい時があります。そういう場合には、「\」を使った特殊文字エスケープシーケンス)で表現することができます。htmlタグの[br]と同じような物です。

  • タブ:\t
  • 改行:\n

document.writeでの場合

<script>
      document.write('こんにちは\nよろしくお願いします。');
</script>


console.logでの場合

<script>
      console.log('こんにちは\nよろしくお願いします。');
</script>


2つの違いをしっかりと理解しましょう。また、ブラウザー上で改行するにはどうすれば良いか考えてみましょう。