Advanced Strings & Tagged Template Literals

// padStart / padEnd
console.log("5".padStart(3, "0"));     // "005"
console.log("42".padStart(5, " "));    // "   42"
console.log("Hi".padEnd(10, "."));     // "Hi........"

// Time formatting
const h = 9, m = 5, s = 3;
const time = `${String(h).padStart(2,"0")}:${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}`;
console.log(time);  // "09:05:03"

// repeat
console.log("⭐".repeat(5));           // "⭐⭐⭐⭐⭐"
console.log("-".repeat(20));            // "--------------------"

// replaceAll (ES2021)
const text = "foo bar foo baz foo";
console.log(text.replaceAll("foo", "qux")); // "qux bar qux baz qux"

// Tagged template literal
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i] !== undefined ? `【${values[i]}】` : "";
    return result + str + value;
  }, "");
}

const name = "Alice";
const age = 25;
console.log(highlight`Hello, ${name}! You are ${age} years old.`);
// "Hello, 【Alice】! You are 【25】 years old."

// HTML sanitizer tag
function safe(strings, ...values) {
  const escape = s => String(s)
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");
  return strings.reduce((result, str, i) => 
    result + str + (values[i] !== undefined ? escape(values[i]) : ""), "");
}

const userInput = '<script>alert("xss")</script>';
console.log(safe`User said: ${userInput}`);
// "User said: &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;"