「変数と定数」と「リテラル」
リテラル | ||||
---|---|---|---|---|
数値リテラル (numeric literal) |
文字列リテラル (string literal) |
|||
宣言(declaration) | let | 変数(variable) | 数値変数 | 文字列変数 |
const | 定数(constant) | 数値定数 | 文字列定数 |
// 数値リテラル // 定数 const a = 1; // 変数 let b = 2; // 文字列リテラル // 定数 const c = "3"; // 変数 let d = "4";
プリミティブ型とオブジェクト
プリミティブ型 | オブジェクト |
---|---|
・数値(Number) ・文字列(String) ・論理値(boolean) ・null ・undefined ・シンボル(Symbol) |
・配列(Array) ・日時(Date) ・正規表現(RegExp) ・マップ(Map) ・ウィークマップ(WeakMap) ・セット(Set) ・ウィークセット(WeakSet) |
数値
- JavaScriptは数値を表す型が一つしかない。
数値リテラル:10進数(整数、小数、10を底とした指数表現)、2進数、8進数、16進数
特殊表現:Infiity、-Infinity、Nan
文字列
- 文字が連続したもの
- JavaScriptでの文字列はUnicodeのテキスト
- JavaScriptでは文字列リテラル、テンプレートリテラルを使用する
- 文字列リテラルには
”(ダブルクォート)
、'(シングルクォート)
がある
- 文字列リテラルには
引用符
引用符には
”(ダブルクォート)
と'(シングルクォート)
がある。文字列リテラルとして
”(ダブルクォート)
を使用している場合、文字列の内部で'(シングルクォート)
が利用できる。
consst message = "I'm happy!";
- 文字列リテラルとして
'(シングルクォート)
を使用している場合、文字列の内部で”(ダブルクォート)
が利用できる。
consst message = '"Me too"';
エスケープ
\(バックスラッシュ)
を使用すると、引用符
をエスケープすることができる。
consst message = "\"I'm happy!\" \"Me too\"";
テンプレートリテラル
\
(バッククォート)`を使用することで、文字列の中に変数を埋め込むようなテンプレートを作ることができる。
let month = 7; let day = 11; console.log(`今日は${month}月${day}日です。`); //今日は7月11日です。
複数行にわたる文字列
- ES2015から複数行にわたるコメントがサポートされるようになりました。
「文字列の改行部分に
改行コード
を挿入する」と「画面(エディター)上の改行をエスケープする」を実施する必要があります。私が好きな方法は
方法③
です。- あえて複数行のコメントを使用する必要は無いと思います。
// 方法①:3行のコメントを1行のコードにする場合 /* 閑さや 岩にしみ入 蝉の声 */ const comment1 = '閑さや\n岩にしみ入\n蝉の声'; console.log(comment1); // 方法②:3行のコメントを3行のコードにする場合 // ->インデントがあるので、構造が分かりにくくなる) /* 閑さや 岩にしみ入 蝉の声 */ const comment2 = '閑さや\n\ 岩にしみ入\n\ 蝉の声'; console.log(comment2); // 方法③:3行のコメントを1行のコード×3にする場合 /* 閑さや 岩にしみ入 蝉の声 */ const comment3 = '閑さや\n' + '岩にしみ入\n' + '蝉の声'; console.log(comment3);
文字列としての数値
- 数を含む文字列は、処理系が自動で数値へ変換することがある。
- 数は、処理系が自動で文字列へ変換することがある。
// ---------- // 文字列としての数値(足し算) // ---------- const comment1 = 4+ '4'; console.log(comment1); // '44' const comment2 = 4+ '04'; console.log(comment2); // '404' const comment3 = '40'+4; console.log(comment3); // '404' const comment4 = '4'+4; console.log(comment4); // '44' // ---------- // 文字列としての数値(引き算) // ---------- const comment5 = 4 - '04'; console.log(comment5); // 0 const comment6 = '04' - 4; console.log(comment6); // 0 // ---------- // 文字列としての数値(かけ算) // ---------- const comment7 = 4 * '04'; console.log(comment7); // 16 const comment8 = '04' * 4; console.log(comment8); // 16 // ---------- // 文字列としての数値(わり算) // ---------- const comment9 = 4 / '04'; console.log(comment9); // 1 const comment10 = '04' / 4; console.log(comment10); // 1
論理値
- ture/falseのいずれか
シンボル
- 作成した
シンボル(symbol)
はユニークであり、他のシンボルと同じになることはない - プリミティブであり、リテラルによる表現を持たない
nullとundefined
- null
- データ型の一つ
- undefined
- まだ値を指定していないことを表す
オブジェクト
オブジェクトのプロパティ(またはメンバー)にアクセスする方法
const profile = {}; profile.name = "taro"; profile['sex'] = 'male'; profile["age"] = 25; console.log(profile);//{name: "taro", sex: "male", age: 25}
生成時に値を指定しする方法
- 最後のプロパティを追加した後にも
,
をつけることができます。 Internet Exprorer
の以前のバージョンでは、構文的に問題ないはずの上記表現がErrorになていたらしい。ブラウザの種類に依存しないコードを作成するために、昔は最後のプロパティに
,
をつけない慣例がありました。JSONとしては、最後のプロパティの後に
,
をつけることが禁止されています。
const profile = { name : 'taro', sex : 'male', age : 25, }; console.log(profile);//{name: "taro", sex: "male", age: 25}
プロパティに関数を持たせる
const profile = {}; profile.name = function(){return 'taro';} console.log(profile); // {name: ƒ} console.log(profile.name); // ƒ (){return 'taro';} console.log(profile.name()); // taro
プロパティを削除する
const profile = { name : 'taro', sex : 'male', age : 25, }; console.log(profile);//{name: "taro", sex: "male", age: 25} delete profile.sex; console.log(profile);//{name: "taro", age: 25}
配列
- 固定長ではない
- 追加、削除が可能
- 個々の要素の型は同じである必要は無い
- 添え字は
0
から始まる
const array =[1,'2','3','四']; console.log(array[0]); // 1 console.log(array[1]); // 2 console.log(array[2]); // 3 console.log(array[3]); // 四 console.log(array[4]); // undfined console.log(array); // [1, "2", "3", "四"] array[6] = 'add'; console.log(array); // [1, "2", "3", "四", empty × 2, "add"]
日時
- 日時を扱うオブジェクト
- JavaからJavaScriptへ引き継がれた機能の一つ
- 日時処理は
momentjs
を使うことを進めます
const now = new Date(); console.log(now); //Sun Jul 12 2020 16:00:10 GMT+0900 (日本標準時) console.log(date.getFullYear()); // 2020 console.log(date.getMonth()); // 6 (0から始まる) console.log(date.getDate()); // 12 console.log(date.getDay()); // 0 (0:日曜日~6:土曜日) console.log(date.getHours()); // 16 console.log(date.getMinutes()); // 0 console.log(date.getSeconds()); // 10 console.log(date.getMilliseconds()); // 339
正規表現
- 文字列に対し、検索や置換を行うときに便利
MapとSet
名称 | 関係する型 | (Weakなモノ) |
---|---|---|
Map | オブジェクト | WeakMap |
Set | 配列 | WeakSet |
データの型変換
数値への変換
Numberオブジェクトのコンストラクタを使用する
- 数値変換できない文字列を変換しようとした場合は
NaN
となる
const input = '123.456'; console.log(input); // '123.456' const check = Number(input); console.log(check); // 123.456 const input2 = '123'; const check2 = Number(input2); console.log(check2); // NaN
parseInt()
,parseFloat()
を使用する。
- 数値以外が混ざっていても無視されます。
- 無視のされ方は、確認しましょう。
const input1 = '7月'; console.log(parseInt(input1,10)); // 7 const input2 = '7月12日'; console.log(parseInt(input2,10)); // 7
文字列への変換
toString()
を使用する。
const now = new Date(); console.log(now); // Sun Jul 12 2020 16:00:10 GMT+0900 (日本標準時) console.log(now.toString()); // Sun Jul 12 2020 16:00:10 GMT+0900 (日本標準時) const array =[1,'2','3','四']; console.log(array.toString()); // 1,2,3,四
論理値への変換
- Booleanコンストラクタを使う
const n = 1; const flag = Boolean(n); console.log(n); // 1 console.log(flag); // true