テンプレートリテラルとよく使う文字列操作

導入

テンプレートリテラルの基本

// Template literals use backticks and ${}
// They support variables, expressions, and multi-line text
const name = "Ayla";
const score = 7;
const msg = `Hello, ${name}! Your score is ${score * 10}.`;

console.log(msg);

const lines = `Line 1
Line 2`;
console.log(lines);

文字列メソッドの概要

// Common string methods on a small example
const title = "  JavaScript Basics  ";

console.log("Length:", title.length);
console.log("Trim:", title.trim());
console.log("Upper:", title.toUpperCase());
console.log("Includes JS:", title.includes("JavaScript"));
console.log("Index of B:", title.indexOf("B"));
console.log("Slice 2..6:", title.slice(2, 6));

簡潔な文字列整形

// Concatenation with + versus template literals
const user = "Mina";
const points = 12;

const viaPlus = "User: " + user + ", Points: " + points;
const viaTpl = `User: ${user}, Points: ${points}`;

console.log(viaPlus);
console.log(viaTpl);

丸めの基本

// Numbers: integers, floats, and rounding helpers
const price = 4.35;
const qty = 3;

const total = price * qty;
console.log("Total raw:", total);

console.log("Math.round:", Math.round(total));
console.log("Math.floor:", Math.floor(total));
console.log("Math.ceil:", Math.ceil(total));

// toFixed returns a string with fixed decimals
console.log("toFixed(2):", total.toFixed(2));

日付の概要

// Date basics: now, parts, and ISO output
const now = new Date();

console.log("Now:", now.toString());
console.log("Year:", now.getFullYear());
console.log("ISO:", now.toISOString());

テンプレートリテラルのクイズ

まとめ