JavaScript テンプレートリテラル：タグ付きテンプレートと文字列処理の比較

            
const name = 'Alice';
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Output: Hello, my name is Alice and I am 30 years old.

            

              
                Copy
              
            
          

            
const name = 'Alice';
const age = 30;
const greeting = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';
console.log(greeting);

            

              
                Copy
              
            
          

            
const multiLineString = `This is a
multi-line
string.`;
console.log(multiLineString);
/* Output:
This is a
multi-line
string.
*/

            

              
                Copy
              
            
          

            
const name = 'Bob';
const age = 25;
const result = myTag`My name is ${name} and I am ${age} years old.`;
console.log(result);

            

              
                Copy
              
            
          

            
function myTag(strings, ...values) {
  console.log('strings:', strings);
  console.log('values:', values);
  return 'Processed String';
}

const name = 'Bob';
const age = 25;
const result = myTag`My name is ${name} and I am ${age} years old.`;
/* Output:
strings: ["My name is ", " and I am ", " years old.", raw: Array(3)]
values: ["Bob", 25]
*/

            

              
                Copy
              
            
          

            
function escapeHTML(strings, ...values) {
  const escapedValues = values.map(value => {
    return String(value)
      .replace(/&/g, '&')
      .replace(//g, '>')
      .replace(/"/g, '"')
      .replace(/'/g, ''');
  });
  let result = strings[0];
  for (let i = 0; i < escapedValues.length; i++) {
    result += escapedValues[i] + strings[i + 1];
  }
  return result;
}

const userInput = '';
const safeHTML = escapeHTML`
User input: ${userInput}
`;
console.log(safeHTML);
// Output: 
User input: <script>alert("XSS");</script>

            

              
                Copy
              
            
          

            
// Simplified example (requires a translation dictionary)
const translations = {
  en: {
    greeting: 'Hello, {name}!',
    agePrompt: 'You are {age} years old.'
  },
  fr: {
    greeting: 'Bonjour, {name} !',
    agePrompt: 'Vous avez {age} ans.'
  },
  es: {
    greeting: '¡Hola, {name}!',
    agePrompt: 'Tienes {age} años.'
  }
};

let currentLanguage = 'en';

function i18n(strings, ...values) {
  const key = strings.join('{}'); // Simple key generation, can be improved
  const translation = translations[currentLanguage][key];

  if (!translation) {
    console.warn(`Translation not found for key: ${key}`);
    return strings.reduce((acc, part, i) => acc + part + (values[i] || ''), ''); // Return original string
  }

  // Replace placeholders with values
  let result = translation;
  values.forEach((value, index) => {
    result = result.replace(`{${index}}`, value);
  });

  return result;
}

const name = 'Carlos';
const age = 35;

console.log(i18n`Hello, {name}! You are {age} years old.`); // Output (English): Hello, Carlos! You are 35 years old.

currentLanguage = 'fr';
console.log(i18n`Hello, {name}! You are {age} years old.`); // Output (French): Translation not found, so returns English: Hello, Carlos! You are 35 years old. (because a more complex key is needed.)

            

              
                Copy
              
            
          

            
function bold(strings, ...values) {
  let result = strings[0];
  for (let i = 0; i < values.length; i++) {
    result += `${values[i]}` + strings[i + 1];
  }
  return result;
}

const item = 'product';
const price = 99.99;
const formattedString = bold`The ${item} costs ${price}.`;
console.log(formattedString); // Output: The product costs 99.99.

            

              
                Copy
              
            
          

            
function validateEmail(strings, ...values) {
  const email = values[0]; // Assuming only one value: the email address
  const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

  if (!emailRegex.test(email)) {
    return 'Invalid email address.';
  }
  return `Valid email: ${email}`;
}

const email1 = 'test@example.com';
const email2 = 'invalid-email';

console.log(validateEmail`Email address: ${email1}`); // Output: Valid email: test@example.com
console.log(validateEmail`Email address: ${email2}`); // Output: Invalid email address.

            

              
                Copy
              
            
          

            
const text = 'This is a string with some URLs: https://www.example.com and http://another.example.org.';
const urls = text.match(/(https?:\/\/[^\s]+)/g);
console.log(urls); // Output: [ 'https://www.example.com', 'http://another.example.org' ]

            

              
                Copy
              
            
          

            
const str = 'Hello, world!';
const substring = str.substring(0, 5); // Extract the first 5 characters
console.log(substring); // Output: Hello

            

              
                Copy