おきがるみがる

お気軽&身軽にスナップ写真を楽しむ雑記ブログです。はてなブログテーマ Sentenceの配布も行っております。

JavaScriptにおける各種リテラルの記述方法 -『JavaScript本格入門』第2章

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門』を進めていきます。とは言ってもまだまだ第1章の半ばです。

この記事ではリテラルについて学びます。リテラルとは、データ型に格納できる値そのもの、あるいは値の表現方法です。

※前回はこちら

www.okigaru-migaru.net

数値リテラル

数値リテラルは整数リテラルと浮動小数点リテラルに分けられます。

さらに整数リテラルは以下の4種類に分けられます。

  • 10進数リテラル:100、3、0
  • 16進数リテラル:0xFFffFF、oxCC55CC
  • 8進数リテラル:0o600、0o644、0o777
  • 2進数リテラル:0b11、0b101

16・8・2進数はそれぞれリテラルの頭に0x・0o・0bを付ける必要があります。

浮動小数点リテラルは以下のような表記が可能です。

  • 1.5
  • 3.14e5 → 3.14 × 105
  • 3.14e-8 →3.14 × 10^-8

文字列リテラル

文字列リテラルは'(シングルクォート)か"(ダブルクォート)で囲む必要があります。

使い分け方としては、例えば文字列の中に「He's」などシングルクォートが登場する場合はダブルクォートで囲みます。

エスケープシーケンス

キーボードから直接に表現できない文字などは、エスケープシーケンスを使って表現できます。主なエスケープシーケンスは以下の通りです。

文字 概要
\b バックスペース
\f 改ページ
\n 改行
\r 復帰
\t タブ文字
\ バックスラッシュ
\' シングルクォート
\" ダブルクォート
\xXX Latin-1 文字(XXは16進数)
\uXXXX Unicode文字(XXXXは16進数)
\u{XXXX} oxffffを超えるUnicode文字
window.alert('こんにちは、JavaScript!\n頑張って勉強しましょうね。');    //途中で改行する例

テンプレート文字列

テンプレート文字列を利用することで、改行のエスケープシーケンスが不要となり、${…}の形式で変数を埋め込むことが可能です。

‘や"の代わりに`(バッククォート)で文字列を囲みます。例は以下の通り。

let name = '鈴木';
let str = `こんにちは、${name}さん。
今日も良い天気ですね!`;
console.log(str);

配列リテラル

配列とはデータの集合のことで、1つの変数に対して複数の値を格納できます。1つ1つに格納された値のことを要素といいます。

カンマ区切りの値を[…](ブラケット)でくくった形式で表現します。

var data = ['JavaScript', 'Ajax', 'ASP.NET'];
console.(data[0]);    //結果:JavaSctipt(1番目の要素を取得)

また、入れ子に配列を持つことも可能です。

var data = ['JavaScript', ['JQuery', 'prototype.js'], 'ASP.NET'];
console.(data[1][0]);    //結果:JQuery(2番目の要素の中の1番目の要素を取得)

オブジェクトリテラル

オブジェクトとは名前をキーにアクセスできる配列です。ハッシュ、連想配列とも呼ばれます。

文字列をキーにアクセスできるのでデータの可読性が高いのが特徴です。オブジェクト内の個々のデータはプロパティと呼びます。関数が格納されたプロパティは特別にメソッドと呼びます。

var obj = { x:1, y:2, z:3 };
console.log(obj.x);    // 結果:1
console.log(obj['y']);    //結果:2

アクセス方法として、以下の2種類があります。

  • ドット演算子:オブジェクト名.プロパティ名
  • ブラケット演算子:オブジェクト名[‘プロパティ名’]

ドット演算子ではプロパティ名は識別子と見なされるので、識別子の命名規則に則っていない名前は使えません。

命名規則についてはこちらの記事にて。

www.okigaru-migaru.net

関数リテラル

関数とは入力値(引数)を与えられることによって、あらかじめ決められた処理を行い、その結果(戻り値)を返すしくみです。

関数については複雑なので別の章で解説されます。

未定義値(undefined)

未定義値(undefined)は、ある変数の値が定義されていないことを表す値です。

以下のようなケースで返されます。

  • ある変数が宣言済みであるものの値を与えられていない
  • 未定義のプロパティを参照しようとした
  • 関数で値が返されなかった

ヌル(null)

該当する値がないことを意味するヌル(null)という値もあります。

undefinedは「定義されていない(参照することを想定していない)」のに対して、nullは「空である」という状態を表します。

実際にアプリを開発するうえでは、undefinedとnullの区別が曖昧である状況も少なくないので、おおまかな区別を理解しておきましょう。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで