JavaScript超入門② 変数・型・計算を覚えよう
let、const、数値、文字列、真偽値、テンプレートリテラル、主な演算子を学びます。
第2回では、値を保存する変数と、JavaScriptの主なデータ型を学びます。
constとlet
const name = "Aoi";
let score = 80;
score = 90;constは、後から別の値を代入しない変数に使います。letは、後から値を変更する変数に使います。
最初はconstを基本にし、変更が必要な場合だけletを使うと分かりやすくなります。
主なデータ型
const age = 18;
const height = 170.5;
const name = "Aoi";
const isStudent = true;
const emptyValue = null;| 型 | 保存するもの |
|---|---|
| number | 整数と小数 |
| string | 文字列 |
| boolean | trueかfalse |
| null | 値がないことを明示する |
| undefined | 値がまだ設定されていない |
typeofを使うと型を確認できます。
console.log(typeof 10);
console.log(typeof "Aoi");文字列へ変数を入れる
バッククォートで囲んだ文字列では、**${変数名}**の形で値を入れられます。
const name = "Aoi";
const score = 80;
console.log(`${name}さんは${score}点です`);この書き方をテンプレートリテラルと呼びます。
計算する
| 記号 | 計算 |
|---|---|
| + | 足し算 |
| - | 引き算 |
| * | 掛け算 |
| / | 割り算 |
| % | 余り |
| ** | べき乗 |
const price = 300;
const count = 4;
const total = price * count;
console.log(`合計は${total}円です`);文字列と数字に注意する
console.log("5" + 2);
console.log(Number("5") + 2);最初の結果は“52”です。文字列を数字へ変換する場合はNumberを使います。
ブラウザのpromptで受け取る値も文字列なので、計算前に変換します。
小さな練習
商品の価格と個数を変数へ入れ、合計金額をテンプレートリテラルで表示してください。
模範解答
const price = 350;
const quantity = 3;
const total = price * quantity;
console.log(`合計金額は${total}円です`);解説
価格と個数は途中で変えないためconstで宣言しています。バッククォートで囲んだテンプレートリテラルでは、${total}の位置へ計算結果が入ります。この例の表示結果は「合計金額は1050円です」です。
まとめ
- 変更しない変数はconst、変更する変数はletで作ります。
- 数字と文字列は別の型です。
- テンプレートリテラルで文字列へ変数を入れられます。