JavaScript入門 #6 - 文字列とテンプレートリテラル

このシリーズについて

「JavaScript入門」第6回です。今回は、画面表示や入力処理で必ず使う文字列を扱います。

文字列とは

文字列は、文字の並びです。JavaScriptでは string 型として扱います。

const message = "こんにちは";
console.log(message);

文字列を組み立てる時は、基本的にテンプレートリテラルを使うと読みやすくなります。

Step 1: 文字列を連結する

+ を使うと文字列をつなげられます。

const firstName = "Taro";
const lastName = "Yamada";

console.log(lastName + " " + firstName);

短い連結なら問題ありませんが、値が増えると読みにくくなります。

Step 2: テンプレートリテラルを使う

バッククォートで囲むと、${} の中に変数や式を書けます。

const name = "Taro";
const age = 18;

console.log(`${name}さんは${age}歳です`);
console.log(`来年は${age + 1}歳です`);

出力用の文章を作る時は、この書き方が便利です。

Step 3: 文字数を調べる

length で文字列の長さを確認できます。

const password = "abc12345";

console.log(password.length);
console.log(password.length >= 8);

入力チェックでよく使います。

Step 4: 文字列に含まれるか確認する

includes は、指定した文字列が含まれているかを真偽値で返します。

const email = "student@example.com";

console.log(email.includes("@"));
console.log(email.includes(".com"));

簡単なチェックには使えますが、メールアドレスの完全な検証には専用の考え方が必要です。

Step 5: 前後の空白を消す

フォーム入力では、余計な空白が混ざることがあります。

const input = "  JavaScript  ";

console.log(input);
console.log(input.trim());

Step 6: 文字列を置き換える

replace は、文字列の一部を置き換えます。

const text = "I like Java.";

console.log(text.replace("Java", "JavaScript"));

最初に見つかった部分だけを置き換える点に注意します。

練習

strings.js を作り、自己紹介文を作ります。

const name = "Saki";
const language = "JavaScript";
const message = `${name}さんは${language}を学習中です`;

console.log(message);
console.log(message.length);
console.log(message.includes(language));

よくあるエラー

次のステップ

JavaScript入門 #7 - if文と条件分岐 で、条件によって処理を変える方法を学びます。

まとめ

文字列は、表示、入力、検索、メッセージ作成で頻繁に使います。テンプレートリテラル、length、includes、trim をまず押さえると、基本的な文字列処理が書きやすくなります。

参考リソース

• MDN: String
• MDN: テンプレートリテラル

×

PR

×

PR