![見出し画像](https://assets.st-note.com/production/uploads/images/147594627/rectangle_large_type_2_c1e667c415fc0d8309371ada8018224b.png?width=1200)
Java Scriptの基本その3 NumberとStrings
イントロダクション
JavaScriptのNumberとStringsをより詳しく解説しますね。まず、変数を宣言して、それを使って動的な文字列を作成する方法を学びます。例えば、名前や職業、年齢を変数にして、テンプレート文字列でまとめます。次に、数値と文字列の変換についてです。NumberやStringを使って、文字列を数値に、数値を文字列に変換できます。最後に、演算子による型変換の例です。+は文字列連結を、-や*、/は数値変換を行います。この基本を押さえると、JavaScriptがもっと楽しくなりますよ!
1. 変数の宣言と文字列テンプレート
まず、変数を宣言し、それを使って文字列テンプレートを利用する部分について詳しく説明します。
const myName = "Tanaka";
const myJob = "Teacher";
const birthYear = 1980;
const currentYear = 2024;
console.log(
`Hi my name is ${myName}, I'm currently ${
currentYear - birthYear
}. I work as ${myJob}`
);
ここでは、4つの変数を宣言しています。
myNameは自分の名前を表す文字列です。
myJobは自分の職業を表す文字列です。
birthYearは自分の生まれた年を表す数値です。
currentYearは現在の年を表す数値です。
次に、これらの変数を使って文字列テンプレートを作成しています。文字列テンプレートは、バックティック ` を使って文字列を囲み、その中に${}を用いることで変数の値を挿入できます。このテンプレート内で計算も可能で、currentYear - birthYearを使って年齢を計算しています。これにより、コンソールには「Hi my name is Tanaka, I'm currently 44. I work as Teacher」と表示されます。このように、変数を使って動的に文字列を作成できるのが文字列テンプレートの便利な点です。
2. 数値と文字列の変換
次に、数値と文字列の変換について詳しく見ていきます。
const inputNumber = "2000";
console.log(Number(inputNumber), inputNumber);
console.log(typeof Number(inputNumber), typeof inputNumber);
console.log(Number(inputNumber) + 1000, inputNumber + 1000);
const inputString = "Tacos";
console.log(Number(inputString));
console.log(typeof Number(inputString));
const inputValue = 1000;
console.log(String(inputValue));
console.log(typeof String(inputValue));
ここでは、inputNumberという文字列として宣言された変数を数値に変換しています。Number(inputNumber)を使うと、文字列を数値に変換できます。変換後の値と元の値をconsole.logで出力し、さらにtypeofを使ってそれぞれの型を確認しています。
Number(inputNumber)は2000という数値に変換され、型はnumberになります。
inputNumberは元のままの文字列で、型はstringです。
次に、inputStringという文字列を数値に変換しようとしていますが、Number(inputString)はNaN(Not-a-Number)を返します。これは、"Tacos"が数値として解釈できないためです。同様に、inputValueという数値を文字列に変換し、その型を確認しています。
String(inputValue)は"1000"という文字列に変換され、型はstringになります。
このように、JavaScriptでは数値と文字列の相互変換が簡単に行えますが、変換が失敗する場合もあるので注意が必要です。
3. 演算子による型変換
最後に、演算子を使った型変換について詳しく見ていきます。
console.log("100" + 10 + 10);
console.log("100" - 10 - 10);
console.log("100" * 10 * 10);
console.log("100" / 10 / 10);
ここでは、"100"という文字列に対して異なる演算子を使って操作しています。
+演算子は文字列連結を行います。"100" + 10は"10010"となり、さらに+ 10で"1001010"になります。
-、*、/演算子は、文字列を数値に変換して計算を行います。そのため、"100" - 10 - 10は80、"100" * 10 * 10は10000、"100" / 10 / 10は1となります。
このように、演算子によって自動的に型変換が行われるため、意図しない結果になることもあります。特に+演算子は注意が必要です。
まとめ
今回のコードを通じて、JavaScriptの基本的な変数の宣言方法、文字列テンプレートの使い方、数値と文字列の変換方法、そして演算子による型変換について学びました。JavaScriptでは、自動で型変換が行われるため、特に演算子を使う際にはその動作を理解しておくことが重要です。この解説が、皆さんのプログラミング学習に役立てば幸いです。
Githubでも公開してるよ!
先ほどのコードはGithubで公開しているよ。
ここ見てね!
この記事が気に入ったらサポートをしてみませんか?