webサイト制作の勉強|1月ブログ

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>