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で公開しているよ。
ここ見てね！