ஜாவாஸ்கிரிப்ட் டெம்ப்ளேட் லிட்டரல்கள்: டேக் செய்யப்பட்ட டெம்ப்ளேட்கள் vs. ஸ்டிரிங் புராசஸிங்

ஜாவாஸ்கிரிப்ட் டெம்ப்ளேட் லிட்டரல்கள், ECMAScript 2015 (ES6) உடன் அறிமுகப்படுத்தப்பட்டன, ஜாவாஸ்கிரிப்டில் ஸ்டிரிங் கையாளுதலில் ஒரு புரட்சியை ஏற்படுத்தின. அவை பாரம்பரிய ஸ்டிரிங் இணைப்பிற்கு ஒரு சுத்தமான, மேலும் படிக்கக்கூடிய மாற்றீட்டை வழங்குகின்றன மற்றும் பல-வரி ஸ்டிரிங்குகள் மற்றும் ஸ்டிரிங் இன்டர்போலேஷன் போன்ற சக்திவாய்ந்த அம்சங்களை வழங்குகின்றன. ஆனால் அடிப்படைகளுக்கு அப்பால், டேக் செய்யப்பட்ட டெம்ப்ளேட்கள் ஸ்டிரிங் புராசஸிங் திறன்களின் ஒரு புதிய நிலையைத் திறக்கின்றன. இந்த வழிகாட்டி டெம்ப்ளேட் லிட்டரல்களின் நுணுக்கங்களை ஆராய்ந்து, டேக் செய்யப்பட்ட டெம்ப்ளேட்களில் ஆழமாகச் சென்று, அவற்றை நிலையான ஸ்டிரிங் புராசஸிங் நுட்பங்களுடன் ஒப்பிடுகிறது.

டெம்ப்ளேட் லிட்டரல்கள் என்றால் என்ன?

டெம்ப்ளேட் லிட்டரல்கள் என்பவை உட்பொதிக்கப்பட்ட எக்ஸ்பிரஷன்களை அனுமதிக்கும் ஸ்டிரிங் லிட்டரல்கள் ஆகும். அவை இரட்டை அல்லது ஒற்றை மேற்கோள் குறிகளுக்குப் பதிலாக பேக்டிக் (`) எழுத்தால் சூழப்பட்டிருக்கும். இந்த எளிய மாற்றம் ஏராளமான சாத்தியங்களைத் திறக்கிறது.

அடிப்படை சிண்டாக்ஸ் மற்றும் இன்டர்போலேஷன்

டெம்ப்ளேட் லிட்டரல்களின் அடிப்படை அம்சம் ஸ்டிரிங் இன்டர்போலேஷன் ஆகும். நீங்கள் ${expression} சிண்டாக்ஸைப் பயன்படுத்தி ஜாவாஸ்கிரிப்ட் எக்ஸ்பிரஷன்களை நேரடியாக ஸ்டிரிங்கில் உட்பொதிக்கலாம். அந்த எக்ஸ்பிரஷன் மதிப்பிடப்பட்டு, அதன் முடிவு ஒரு ஸ்டிரிங்காக மாற்றப்பட்டு டெம்ப்ளேட் லிட்டரலில் செருகப்படுகிறது.

            
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
              
            
          

பல-வரி ஸ்டிரிங்குகள்

டெம்ப்ளேட் லிட்டரல்கள் பல-வரி ஸ்டிரிங்குகளை உருவாக்குவதையும் எளிதாக்குகின்றன. சிக்கலான \n எழுத்துகளின் தேவையின்றி, நீங்கள் நேரடியாக பேக்டிக்குகளுக்குள் வரி முறிவுகளைச் சேர்க்கலாம்.

            
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
              
            
          

myTag ஃபங்ஷன் பின்வரும் ஆர்குமெண்ட்களைப் பெறுகிறது:

• strings: டெம்ப்ளேட்டிலிருந்து வரும் ஸ்டிரிங் லிட்டரல்களின் ஒரு அரே.
• ...values: இன்டர்போலேட் செய்யப்பட்ட எக்ஸ்பிரஷன்களின் மதிப்புகள்.

strings அரே, இன்டர்போலேட் செய்யப்பட்ட மதிப்புகளுக்கு *முன்பு*, *இடையில்*, மற்றும் *பிறகு* உள்ள ஸ்டிரிங்கின் பகுதிகளைக் கொண்டுள்ளது. values ஆர்குமெண்ட் என்பது ஒரு ரெஸ்ட் பாராமீட்டர் (...values) ஆகும், இது அனைத்து இன்டர்போலேட் செய்யப்பட்ட மதிப்புகளையும் ஒரு அரேவில் சேகரிக்கிறது.

            
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
              
            
          

strings அரேவில் raw என்ற ஒரு பிராப்பர்ட்டியும் இருப்பதைக் கவனியுங்கள், இது மூல, எஸ்கேப் செய்யப்படாத ஸ்டிரிங் லிட்டரல்களைக் கொண்டுள்ளது. இது எஸ்கேப் சீக்வென்ஸ்களைக் கையாளும் போது பயனுள்ளதாக இருக்கும்.

தனிப்பயன் டேக்குகளை உருவாக்குதல்: நடைமுறை எடுத்துக்காட்டுகள்

டேக் செய்யப்பட்ட டெம்ப்ளேட்களின் உண்மையான சக்தி, குறிப்பிட்ட ஸ்டிரிங் புராசஸிங் பணிகளுக்காக தனிப்பயன் டேக்குகளை வரையறுக்கும் திறனில் உள்ளது. இங்கே சில நடைமுறை எடுத்துக்காட்டுகள்:

1. HTML எஸ்கேப்பிங்

இணையப் பாதுகாப்பிற்கு கிராஸ்-சைட் ஸ்கிரிப்டிங் (XSS) தாக்குதல்களைத் தடுப்பது மிகவும் முக்கியம். ஒரு டேக் செய்யப்பட்ட டெம்ப்ளேட் தானாகவே இன்டர்போலேட் செய்யப்பட்ட மதிப்புகளில் உள்ள HTML என்டிட்டிகளை எஸ்கேப் செய்ய முடியும்.

            
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
              
            
          

2. உள்ளூர்மயமாக்கல் (i18n)

டேக் செய்யப்பட்ட டெம்ப்ளேட்கள் மொழி குறியீட்டின் அடிப்படையில் மொழிபெயர்ப்புகளைத் தேட ஒரு வசதியான வழியை வழங்குவதன் மூலம் சர்வதேசமயமாக்கலை (i18n) எளிதாக்கப் பயன்படுத்தப்படலாம்.

            
// 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
              
            
          

குறிப்பு: இது ஒரு எளிமைப்படுத்தப்பட்ட எடுத்துக்காட்டு. ஒரு நிஜ-உலக சூழ்நிலையில், நீங்கள் ஒரு வலுவான மொழிபெயர்ப்பு நூலகம் மற்றும் கீ ஜெனரேஷன் உத்தியைப் பயன்படுத்துவீர்கள்.

3. ஸ்டைலிங் மற்றும் ஃபார்மேட்டிங்

டேக் செய்யப்பட்ட டெம்ப்ளேட்கள் ஸ்டிரிங்குகளுக்கு தனிப்பயன் ஸ்டைலிங் அல்லது ஃபார்மேட்டிங்கைப் பயன்படுத்தப் பயன்படலாம். எடுத்துக்காட்டாக, சில வார்த்தைகளுக்கு தானாகவே தடித்த வடிவத்தை வழங்கும் ஒரு டேக்கை நீங்கள் உருவாக்கலாம்.

            
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
              
            
          

4. உள்ளீட்டைச் சரிபார்த்தல்

டேக் செய்யப்பட்ட டெம்ப்ளேட்கள் உள்ளீட்டுத் தரவைச் சரிபார்க்கவும் பயன்படுத்தப்படலாம். பயனரால் வழங்கப்பட்ட மதிப்புகள் குறிப்பிட்ட விதிகளுக்கு இணங்குவதை உறுதிசெய்ய இது குறிப்பாக பயனுள்ளதாக இருக்கும்.

            
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
              
            
          

டேக் செய்யப்பட்ட டெம்ப்ளேட்களுடன் பாதுகாப்பு பரிசீலனைகள்

டேக் செய்யப்பட்ட டெம்ப்ளேட்கள் பல நன்மைகளை வழங்கினாலும், சாத்தியமான பாதுகாப்பு தாக்கங்கள் குறித்து எச்சரிக்கையாக இருப்பது முக்கியம், குறிப்பாக பயனர் உள்ளீட்டைக் கையாளும் போது. XSS பாதிப்புகளைத் தடுக்க பயனர் வழங்கிய மதிப்புகளை எப்போதும் சுத்திகரிக்கவும் அல்லது எஸ்கேப் செய்யவும். நீங்கள் மூன்றாம் தரப்பு நூலகத்திலிருந்து ஒரு டேக்கைப் பயன்படுத்தினால், அது நன்கு சோதிக்கப்பட்டதாகவும் நம்பகமானதாகவும் இருப்பதை உறுதிப்படுத்திக் கொள்ளுங்கள்.

ஸ்டிரிங் புராசஸிங் நுட்பங்கள்: ஒரு ஒப்பீடு

டேக் செய்யப்பட்ட டெம்ப்ளேட்கள் ஸ்டிரிங்குகளைச் செயலாக்க ஒரு சக்திவாய்ந்த மற்றும் நெகிழ்வான வழியை வழங்குகின்றன, ஆனால் அவை ஒவ்வொரு சூழ்நிலைக்கும் எப்போதும் சிறந்த தீர்வாக இருப்பதில்லை. மற்ற பொதுவான ஸ்டிரிங் புராசஸிங் நுட்பங்களுடன் ஒரு ஒப்பீடு இங்கே.

ரெகுலர் எக்ஸ்பிரஷன்கள்

ரெகுலர் எக்ஸ்பிரஷன்கள் ஸ்டிரிங்குகளில் பேட்டர்ன் பொருத்தம் மற்றும் கையாளுதலுக்கான சக்திவாய்ந்த கருவிகளாகும். அவை போன்ற பணிகளுக்கு மிகவும் பொருத்தமானவை:

• உள்ளீட்டு வடிவங்களைச் சரிபார்த்தல் (எ.கா., மின்னஞ்சல் முகவரிகள், தொலைபேசி எண்கள்).
• ஸ்டிரிங்குகளில் இருந்து குறிப்பிட்ட தகவல்களைப் பிரித்தெடுத்தல் (எ.கா., ஒரு ஆவணத்தில் உள்ள அனைத்து URL-களையும் கண்டறிதல்).
• ஸ்டிரிங்குகளில் பேட்டர்ன்களை மாற்றுதல் (எ.கா., அனைத்து HTML டேக்குகளையும் அகற்றுதல்).

நன்மைகள்:

• சிக்கலான பேட்டர்ன் பொருத்தத்திற்கு மிகவும் திறமையானது.
• பரவலாக ஆதரிக்கப்படுகிறது மற்றும் நன்கு புரிந்து கொள்ளப்படுகிறது.

குறைபாடுகள்:

• சிக்கலான பேட்டர்ன்களுக்குப் படிக்கவும் பராமரிக்கவும் கடினமாக இருக்கலாம்.
• சில பணிகளுக்கு டேக் செய்யப்பட்ட டெம்ப்ளேட்களை விட குறைவான நெகிழ்வுத்தன்மையைக் கொண்டிருக்கலாம்.

            
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
              
            
          

ஸ்டிரிங் மெத்தட்கள் (substring, slice, replace, போன்றவை.)

ஜாவாஸ்கிரிப்டின் உள்ளமைக்கப்பட்ட ஸ்டிரிங் மெத்தட்கள் ஸ்டிரிங்குகளைக் கையாள ஒரு அடிப்படை கருவிகளின் தொகுப்பை வழங்குகின்றன. அவை போன்ற எளிய பணிகளுக்கு ஏற்றவை:

• சப்ஸ்டிரிங்குகளைப் பிரித்தெடுத்தல்.
• எழுத்துகள் அல்லது சப்ஸ்டிரிங்குகளை மாற்றுதல்.
• ஸ்டிரிங்குகளை பெரிய அல்லது சிறிய எழுத்துகளுக்கு மாற்றுதல்.

நன்மைகள்:

• அடிப்படை ஸ்டிரிங் செயல்பாடுகளுக்கு எளிமையானது மற்றும் பயன்படுத்த எளிதானது.
• எளிய பணிகளுக்கு பொதுவாக திறமையானது.

குறைபாடுகள்:

• மேலும் சிக்கலான ஸ்டிரிங் கையாளுதலுக்கு சிக்கலானதாக மாறக்கூடும்.
• ரெகுலர் எக்ஸ்பிரஷன்கள் அல்லது டேக் செய்யப்பட்ட டெம்ப்ளேட்களை விட குறைவான நெகிழ்வுத்தன்மை கொண்டது.

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

            

              
                Copy
              
            
          

டேக் செய்யப்பட்ட டெம்ப்ளேட்கள், ரெகுலர் எக்ஸ்பிரஷன்கள், அல்லது ஸ்டிரிங் மெத்தட்களை எப்போது பயன்படுத்துவது

எந்த நுட்பத்தைப் பயன்படுத்துவது என்பது பணியின் குறிப்பிட்ட தேவைகளைப் பொறுத்தது.

• டேக் செய்யப்பட்ட டெம்ப்ளேட்கள்: HTML எஸ்கேப்பிங், உள்ளூர்மயமாக்கல், ஸ்டைலிங் மற்றும் உள்ளீட்டு சரிபார்ப்பு போன்ற தனிப்பயன் லாஜிக் தேவைப்படும் சிக்கலான ஸ்டிரிங் புராசஸிங் பணிகளுக்குப் பயன்படுத்தவும். டொமைன்-குறிப்பிட்ட மொழிகளை (DSLs) உருவாக்கவும் அவை பயனுள்ளதாக இருக்கும்.
• ரெகுலர் எக்ஸ்பிரஷன்கள்: பேட்டர்ன் பொருத்தம், பிரித்தெடுத்தல் மற்றும் மாற்றுப் பணிகளுக்குப் பயன்படுத்தவும். உள்ளீட்டு வடிவங்களைச் சரிபார்ப்பதற்கும் ஸ்டிரிங்குகளில் இருந்து தரவைப் பிரித்தெடுப்பதற்கும் அவை குறிப்பாகப் பொருத்தமானவை.
• ஸ்டிரிங் மெத்தட்கள்: சப்ஸ்டிரிங்குகளைப் பிரித்தெடுத்தல், எழுத்துகளை மாற்றுதல் மற்றும் கேஸ் மாற்றுதல் போன்ற எளிய ஸ்டிரிங் கையாளுதல் பணிகளுக்குப் பயன்படுத்தவும்.

சில சந்தர்ப்பங்களில், விரும்பிய முடிவை அடைய நீங்கள் வெவ்வேறு நுட்பங்களை இணைக்க வேண்டியிருக்கும். எடுத்துக்காட்டாக, HTML என்டிட்டிகளை எஸ்கேப் செய்ய நீங்கள் ஒரு டேக் செய்யப்பட்ட டெம்ப்ளேட்டைப் பயன்படுத்தலாம், பின்னர் எஸ்கேப் செய்யப்பட்ட ஸ்டிரிங்கிலிருந்து குறிப்பிட்ட தகவல்களைப் பிரித்தெடுக்க ரெகுலர் எக்ஸ்பிரஷன்களைப் பயன்படுத்தலாம்.

சிறந்த நடைமுறைகள் மற்றும் பரிசீலனைகள்

• உங்கள் டேக் ஃபங்ஷன்களை சிறியதாகவும் கவனம் செலுத்துவதாகவும் வைத்திருங்கள். ஒரு டேக் ஃபங்ஷன் ஒரு தனித்த, நன்கு வரையறுக்கப்பட்ட பணியைச் செய்ய வேண்டும்.
• உங்கள் டேக் ஃபங்ஷன்களுக்கு விளக்கமான பெயர்களைப் பயன்படுத்தவும். இது உங்கள் குறியீட்டைப் படிக்கவும் புரிந்துகொள்ளவும் எளிதாக்கும்.
• பிழைகளை நளினமாகக் கையாளவும். உங்கள் டேக் ஃபங்ஷன் ஒரு பிழையை எதிர்கொண்டால், அது ஒரு அர்த்தமுள்ள பிழை செய்தியைத் திருப்ப வேண்டும் அல்லது ஒரு விதிவிலக்கை வீச வேண்டும்.
• செயல்திறனைக் கவனத்தில் கொள்ளுங்கள். டேக் ஃபங்ஷன்கள் செயல்திறனை பாதிக்கக்கூடும், குறிப்பாக அவை அடிக்கடி பயன்படுத்தப்பட்டால் அல்லது சிக்கலான செயல்பாடுகளைச் செய்தால்.
• பொதுவான டேக்கிங் பணிகளுக்கு ஒரு நூலகத்தைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள். HTML எஸ்கேப்பிங், உள்ளூர்மயமாக்கல் மற்றும் ஸ்டைலிங் போன்ற பணிகளுக்கு முன்பே கட்டமைக்கப்பட்ட டேக் ஃபங்ஷன்களை வழங்கும் பல நூலகங்கள் உள்ளன.
• பாதுகாப்பு பாதிப்புகளைத் தடுக்க பயனர் உள்ளீட்டை எப்போதும் சுத்திகரிக்கவும். பயனர் வழங்கிய மதிப்புகளைச் செயலாக்க டேக் செய்யப்பட்ட டெம்ப்ளேட்களைப் பயன்படுத்தும் போது இது மிகவும் முக்கியம்.

முடிவுரை

ஜாவாஸ்கிரிப்ட் டெம்ப்ளேட் லிட்டரல்கள், குறிப்பாக டேக் செய்யப்பட்ட டெம்ப்ளேட்களின் கூடுதலுடன், ஸ்டிரிங்குகளைக் கையாள ஒரு சக்திவாய்ந்த மற்றும் நெகிழ்வான வழியை வழங்குகின்றன. டேக் செய்யப்பட்ட டெம்ப்ளேட்களின் நன்மைகள் மற்றும் வரம்புகளைப் புரிந்துகொள்வதன் மூலமும், அவற்றை மற்ற ஸ்டிரிங் புராசஸிங் நுட்பங்களுடன் ஒப்பிடுவதன் மூலமும், நீங்கள் மிகவும் திறமையான, படிக்கக்கூடிய மற்றும் பாதுகாப்பான குறியீட்டை எழுதலாம். நீங்கள் வலைப் பயன்பாடுகள், கட்டளை-வரி கருவிகள் அல்லது சர்வர்-பக்க பயன்பாடுகளை உருவாக்கினாலும், டெம்ப்ளேட் லிட்டரல்கள் மற்றும் டேக் செய்யப்பட்ட டெம்ப்ளேட்களில் தேர்ச்சி பெறுவது உங்கள் ஜாவாஸ்கிரிப்ட் திறன்களை கணிசமாக மேம்படுத்தும்.