JavaScript Template Literals

JavaScript Template Literals అంటే ఏమిటి?

Template literals అనేవి strings ను సులభంగా create చేయడానికి ఉపయోగించే modern JavaScript syntax. వీటిని single quotes లేదా double quotes బదులుగా backtick character ` తో రాస్తాము.

Template literal లో variable value లేదా expression ను చేర్చడానికి ${expression} syntax ఉపయోగిస్తాము. దీనిని string interpolation అంటారు.

Basic Syntax

ఒక template literal ఇలా ఉంటుంది: `Hello, ${name}`. ఇక్కడ ${name} స్థానంలో name variable యొక్క value వస్తుంది.

Template Literals ఉపయోగాలు

• Strings లో variables ను సులభంగా కలపవచ్చు.
• String concatenation కోసం + operator అవసరం తగ్గుతుంది.
• Multiple lines ఉన్న strings ను సులభంగా రాయవచ్చు.
• Template literal లో expressions మరియు calculations ను ఉపయోగించవచ్చు.

Expressions ఉపయోగించడం

Template literal లో variable మాత్రమే కాదు, calculation కూడా రాయవచ్చు. ఉదాహరణకు `Total: ${price * quantity}` లో price మరియు quantity multiplication result string లోకి వస్తుంది.

Multiline Strings

Backticks ఉపయోగించడం వల్ల string ను ఒకటి కంటే ఎక్కువ lines లో రాయవచ్చు. Newline automatically preserve అవుతుంది.

Quotes తో ఉపయోగించడం

Template literal లో single quotes మరియు double quotes ను సాధారణంగా escape చేయకుండా ఉపయోగించవచ్చు. అయితే backtick character ను string లోనే ఉపయోగించాలంటే దానికి escape అవసరం.

Simple Explanation

Template literal అనేది dynamic string తయారు చేసే సులభమైన మార్గం. ఉదాహరణకు name variable లో Ravi ఉంటే, `Hello, ${name}` output గా Hello, Ravi ఇస్తుంది.

`${…}` మధ్య ఉన్న code ముందుగా evaluate అవుతుంది. ఆ result తర్వాత string లో చేర్చబడుతుంది. అందువల్ల messages, bills, notifications మరియు reports తయారు చేయడం సులభం.

Real-Life Example

ఒక shopping bill తయారు చేస్తున్నప్పుడు product name, quantity మరియు price values ను కలిపి receipt చూపించాలి. సాధారణ concatenation లో చాలా + operators అవసరం కావచ్చు. Template literal తో `Product: ${product}, Total: ${price * quantity}` వంటి readable format ను సులభంగా తయారు చేయవచ్చు.

Code Examples

const name = "Ravi";
const course = "JavaScript";
const message = `Hello, ${name}! Welcome to ${course}.`;
console.log(message);

Hello, Ravi! Welcome to JavaScript.

const item = "Notebook";
const price = 50;
const quantity = 2;
const total = price * quantity;
const receipt = `Item: ${item}
Quantity: ${quantity}
Total: ₹${total}`;
console.log(receipt);

Item: Notebook
Quantity: 2
Total: ₹100

const user = "Anu";
const message = `Dear ${user},
Your registration was successful.
Thank you!`;
console.log(message);

Dear Anu,
Your registration was successful.
Thank you!

Line-by-Line Explanation

Try It

Try this JavaScript code:

const product = "Pen";
const price = 15;
const quantity = 3;
const total = price * quantity;

const bill = `Product: ${product}
Quantity: ${quantity}
Total: ₹${total}`;

console.log(bill);

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• Template literals strings ను backticks తో create చేస్తాయి.
• Variables మరియు expressions ను string లో చేర్చడానికి ${…} syntax ఉపయోగిస్తారు.
• Template literals లో calculations ను కూడా evaluate చేయవచ్చు.
• Backticks multiple lines ఉన్న strings ను support చేస్తాయి.
• Template literals string concatenation కంటే సాధారణంగా readable గా ఉంటాయి.