మీరు జావాస్క్రిప్ట్‌లో స్ట్రింగ్‌ను ఎలా ఫార్మాట్ చేస్తారు?

మీరు జావాస్క్రిప్ట్‌లో స్ట్రింగ్‌ను ఎలా ఫార్మాట్ చేస్తారు?

జావాస్క్రిప్ట్‌లో, స్ట్రింగ్ అనేది ఒక జత సింగిల్ లేదా డబుల్ కొటేషన్ మార్కులతో జతచేయబడిన అక్షరాల సమూహం. జావాస్క్రిప్ట్‌లో స్ట్రింగ్‌లను ఫార్మాట్ చేయడానికి అనేక మార్గాలు ఉన్నాయి.





స్ట్రింగ్‌లను కలపడానికి మీరు నిర్దిష్ట పద్ధతులు లేదా ఆపరేటర్‌లను ఉపయోగించవచ్చు. ఎక్కడ మరియు ఎప్పుడు ఏ స్ట్రింగ్ కనిపించాలో నిర్ణయించడానికి మీరు నిర్దిష్ట కార్యకలాపాలను కూడా చేయవచ్చు.





విండోస్ 10 కిమోడ్ మినహాయింపు నిర్వహించబడలేదు
రోజు యొక్క వీడియోను తయారు చేయండి

సంయోగ పద్ధతులు మరియు టెంప్లేట్ అక్షరాలను ఉపయోగించి మీ జావాస్క్రిప్ట్ స్ట్రింగ్‌లను ఎలా ఫార్మాట్ చేయాలో తెలుసుకోండి.





స్ట్రింగ్ సంయోగం

JavaScript అనేక విధానాలను ఉపయోగించి స్ట్రింగ్‌లను సంగ్రహించడానికి మిమ్మల్ని అనుమతిస్తుంది. ఉపయోగకరమైన విధానం concat() పద్ధతి. ఈ పద్ధతి రెండు లేదా అంతకంటే ఎక్కువ తీగలను ఉపయోగిస్తుంది. ఇది ఒకే కాలింగ్ స్ట్రింగ్‌ని ఉపయోగిస్తుంది మరియు ఒకటి లేదా అంతకంటే ఎక్కువ స్ట్రింగ్‌లను ఆర్గ్యుమెంట్‌లుగా తీసుకుంటుంది.

const firstName = "John"; 
const lastName = "Doe";

let stringVal;

stringVal = firstName.concat(" ", lastName);
console.log(stringVal);

ఇక్కడ, concat స్ట్రింగ్ ఆర్గ్యుమెంట్‌లను (ఖాళీ స్థలం మరియు చివరి పేరు) కాలింగ్ స్ట్రింగ్‌కు (మొదటి పేరు) కలుస్తుంది. కోడ్ ఫలితంగా కొత్త స్ట్రింగ్‌ను వేరియబుల్ (stringVal)లో నిల్వ చేస్తుంది మరియు బ్రౌజర్ కన్సోల్‌కు కొత్త విలువను ప్రింట్ చేస్తుంది :



  కాన్‌కాట్ పద్ధతిని ఉపయోగించడం

ప్లస్ ఆపరేటర్‌ని ఉపయోగించడం ద్వారా స్ట్రింగ్‌ల సేకరణను కలపడానికి మరొక మార్గం. ఈ పద్ధతి కొత్త స్ట్రింగ్‌లను సృష్టించడానికి స్ట్రింగ్ వేరియబుల్స్ మరియు స్ట్రింగ్ లిటరల్స్‌ను కలపడానికి మిమ్మల్ని అనుమతిస్తుంది.

const firstName = "John"; 
const middleName = "Mike";
const lastName = "Doe";

let stringVal;

stringVal = firstName + " " + middleName + " " + lastName;
console.log(stringVal);

ఎగువ కోడ్ కన్సోల్‌కు క్రింది అవుట్‌పుట్‌ను ప్రింట్ చేస్తుంది:





  ప్లస్ ఆపరేటర్ స్ట్రింగ్ సంయోగం

మీ జావాస్క్రిప్ట్ స్ట్రింగ్‌లను కలపడానికి మూడవ విధానానికి ప్లస్ మరియు సమాన గుర్తును ఉపయోగించడం అవసరం. ఈ పద్ధతి ఇప్పటికే ఉన్న దాని చివర కొత్త స్ట్రింగ్‌ను జోడించడానికి మిమ్మల్ని అనుమతిస్తుంది.

const firstName = "John"; 
const lastName = "Doe";

let stringVal;

stringVal = firstName;
stringVal += " ";
stringVal += lastName;

console.log(stringVal);

ఈ కోడ్ మొదటి పేరు వేరియబుల్‌కు ఖాళీ స్థలం మరియు చివరి పేరు వేరియబుల్ విలువను జోడిస్తుంది, కింది అవుట్‌పుట్‌ను ఉత్పత్తి చేస్తుంది:





  స్ట్రింగ్‌లో ప్లస్ మరియు ఈక్వల్ ఆపరేటర్‌లు

టెంప్లేట్ లిటరల్స్

టెంప్లేట్ అక్షరాలు జావాస్క్రిప్ట్ స్ట్రింగ్‌లను ఫార్మాట్ చేయడానికి మిమ్మల్ని అనుమతించే ES6 ఫీచర్. స్ట్రింగ్‌లను ప్రదర్శించడానికి టెంప్లేట్ లిటరల్ ఒక జత బ్యాక్‌టిక్‌లను (`) ఉపయోగిస్తుంది. స్ట్రింగ్ ఫార్మాటింగ్ యొక్క ఈ పద్ధతి జావాస్క్రిప్ట్‌లో క్లీనర్ మల్టీలైన్ స్ట్రింగ్‌లను ప్రదర్శించడానికి మిమ్మల్ని అనుమతిస్తుంది.

let html; 

html = `<ul>
<li> Name: John Doe </li>
<li> Age: 24 </li>
<li> Job: Software Engineer </li>
</ul>`;

document.body.innerHTML = html;

పైన ఉన్న జావాస్క్రిప్ట్ కోడ్ ఉపయోగించబడుతుంది HTML బ్రౌజర్‌లో మూడు అంశాల జాబితాను ప్రింట్ చేయడానికి:

కంప్యూటర్ విడిభాగాలను కొనుగోలు చేయడానికి ఉత్తమ వెబ్‌సైట్
  టెంప్లేట్ లిటరల్స్ అవుట్‌పుట్

టెంప్లేట్ అక్షరాలు లేకుండా (లేదా టెంప్లేట్ లిటరల్స్‌కు ముందు) అదే అవుట్‌పుట్‌ను సాధించడానికి, మీరు కొటేషన్ మార్కులను ఉపయోగించాల్సి ఉంటుంది. అయినప్పటికీ, మీరు టెంప్లేట్ అక్షరాలతో చేయగలిగిన విధంగా అనేక పంక్తులలో కోడ్‌ని పొడిగించలేరు.

let html; 

html = "<ul><li>Name: John Doe</li><li>Age: 24</li><li>Job: Software Engineer</li></ul>";

document.body.innerHTML = html;

స్ట్రింగ్ ఇంటర్‌పోలేషన్

టెంప్లేట్ అక్షరాలు ఇంటర్‌పోలేషన్ అనే ప్రక్రియ ద్వారా మీ జావాస్క్రిప్ట్ స్ట్రింగ్‌లలో వ్యక్తీకరణలను ఉపయోగించడానికి మిమ్మల్ని అనుమతిస్తాయి. స్ట్రింగ్ ఇంటర్‌పోలేషన్‌తో మీరు మీ స్ట్రింగ్‌లలో ఎక్స్‌ప్రెషన్‌లు లేదా వేరియబుల్స్‌ని ఉపయోగించి పొందుపరచవచ్చు ${expression} ప్లేస్‌హోల్డర్. ఇక్కడే జావాస్క్రిప్ట్ టెంప్లేట్ అక్షరాల విలువ నిజంగా స్పష్టంగా కనిపిస్తుంది.

let userName = "Jane Doe"; 
let age = 21;
let job = "Web Developer";
let experience = 3;

let html;

html = `<ul>
<li> Name: ${userName} </li>
<li> Age: ${age} </li>
<li> Job Title: ${job} </li>
<li> Years of Experience: ${experience} </li>
<li> Developer Level: ${experience < 5 ? "Junior to Intermediate" : "Senior"} </li>
</ul>`;

document.body.innerHTML = html;

ఎగువ కోడ్ కన్సోల్‌లో కింది అవుట్‌పుట్‌ను ఉత్పత్తి చేస్తుంది:

  స్ట్రింగ్ ఇంటర్‌పోలేషన్ అవుట్‌పుట్

యొక్క మొదటి నాలుగు వాదనలు ${expression} ప్లేస్‌హోల్డర్ స్ట్రింగ్ వేరియబుల్స్, కానీ ఐదవది షరతులతో కూడిన వ్యక్తీకరణ. ఎక్స్‌ప్రెషన్ బ్రౌజర్‌లో ఏమి ప్రదర్శించాలో నిర్దేశించడానికి వేరియబుల్స్ (అనుభవం)లో ఒకదాని విలువపై ఆధారపడి ఉంటుంది.

జావాస్క్రిప్ట్‌తో మీ వెబ్‌పేజీలో మూలకాలను ఫార్మాటింగ్ చేయడం

వెబ్‌పేజీ అభివృద్ధితో దాని ఫంక్షనల్ అనుబంధం కాకుండా, వెబ్‌పేజీ రూపకల్పన మరియు లేఅవుట్‌ను ప్రభావితం చేయడానికి జావాస్క్రిప్ట్ HTMLతో పనిచేస్తుంది. టెంప్లేట్ లిటరల్స్ మాదిరిగానే ఇది వెబ్‌పేజీలో కనిపించే వచనాన్ని మార్చగలదు.

ఇది HTMLని చిత్రాలకు మార్చగలదు మరియు వాటిని వెబ్‌పేజీలో ప్రదర్శించగలదు.