JavaScript入門12

JavaScript入門12 JavaScript

JavaScriptを簡単にわかりやすく、公式に則って勉強していきましょう!

シリーズ一覧はこちら

stringの記述方法

stringとは文字列を意味します。前回お話ししたように型があり、プログラミング言語は理解できないので、こちらが指定してあげる必要があります。

では以下のコードをコピペしてみてください。

let username = "per"

console.log(username)

これはusernameという変数にperという文字列を定義しています。そしてコンソールにusernameを出力させています。

このコードでは” “で囲んでいますが、’ ‘で囲んでも構いません。しかし、” ‘のように組み合わせることはできないので注意してください。

JavaScriptでは” “の方が好まれます。

複数の要素を出力する

またまたクイズを出すので、以下のコードを書いてみてください。

let username = "per"

// "3つのお知らせがあります"という文字列が入った"message"という変数を作成してください。 

console.log(username)

正解は以下を参考にしてください。

let username = "per";

// "3つのお知らせがあります"という文字列が入った"message"という変数を作成してください。
let message = "3つのお知らせがあります";

console.log(username);

では”username”と”message”を同時に表示するにはどうすればよいでしょうか。以下を参考にしてみてください。

let username = "per";

// "3つのお知らせがあります"という文字列が入った"message"という変数を作成してください。
let message = "3つのお知らせがあります";

console.log(message + " " + username + "さん");

console.log内で要素をつなげるときは”+”を使用します。

また、要素と要素の間にスペースが入らないことにも注意してください。スペースが欲しい場合は、” “のように文字列を追加してください。

しかしこれは実践向けではありません。もう少し修正がしやすいようにしましょう。以下のコードを参考にしてください。

let username = "per";
let message = "3つのお知らせがあります";

let messageToUser = message + " " + username + "さん";
console.log(messageToUser);

表示されるメッセージが修正がなるべくしやすいようにしてみました。行数は増やしても横に長くならないようにした方が見やすくてよいです。

なるべく、メソッド(console.log()などの関数)の中には変数を引数に指定してあげるようにしましょう。簡単に言えば、()の中には変数を入れるようにしましょう!

要素と要素の間に半角スペースを入れる他の方法

またまたクイズです。以下のコードを書いてください。

// "name"と"greeting"という2つの変数を作成してください。"name"変数は名前を、
// "greeting"変数は"こんにちは。私の名前は "を初期化するようにしてください。

// Create a third variable, 上記2つの変数を含む"myGreeting"という3つ目の変数を作成してください。
// "myGreeting"をコンソールに出力してください。

解答例は以下の通りです。

// "name"と"greeting"という2つの変数を作成してください。"name"変数は名前を、
// "greeting"変数は"こんにちは。私の名前は "を初期化するようにしてください。
let name = "IT×海外の日常";
let greeting = "こんにちは。私の名前は ";
// Create a third variable, 上記2つの変数を含む"myGreeting"という3つ目の変数を作成してください。
let myGreeting = greeting + name;
// "myGreeting"をコンソールに出力してください。
console.log(myGreeting);

今回のポイントは「私の名前は」の後ろに半角スペースを入れたことです。もちろん、” “のようにしてもらっても構いません。

しかし、今回の方法の方が、楽かなと思います。どちらでも好きな方をお使いください。

要素と要素を組み合わせるときはデータ型に注意する

では上記のコードを少しいじりましょう。以下のようにしてください。

let name = 42;
let greeting = "こんにちは。私の名前は ";

let myGreeting = greeting + name;

console.log(myGreeting);

これを出力するとJavaScriptでは”こんにちは。私の名前は 42″と文字列として認識されます。

では以下の場合はどうでしょうか。

let points = 4
let bonusPoints = "10"

let totalPoints = points + bonusPoints

console.log(totalPoints)

実はこの場合、出力される回答は”410″となります。先ほどと同様に、文字列と数字が組み合わされた場合、両方とも文字列として認識されます。

これはJavaScriptの覚えておくべき特徴です。

では以下の場合はどのように出力されるでしょうか。考えてみたり、vs codeで実行してみたりしてしてください。

console.log(4 + 5) // 
console.log("2" + "4") //
console.log("5" + 1) //
console.log(100 + "100") //

回答は左から順に、9,24,51,100100です。全問正解できたでしょうか。

今日はここまでです。お疲れ様でした。

コメント

タイトルとURLをコピーしました