Hogyan kell formázni egy karakterláncot JavaScriptben?

A JavaScriptben a karakterlánc karakterek csoportja, amelyeket szimpla vagy kettős idézőjel zár be. A karakterláncok JavaScriptben történő formázására számos mód létezik.

A karakterláncok kombinálásához speciális módszereket vagy operátorokat használhat. Még konkrét műveleteket is végrehajthat annak eldöntésére, hogy melyik karakterlánc hol és mikor jelenjen meg.

MAKEUSEOF A NAP VIDEÓJA

Ismerje meg, hogyan formázhatja JavaScript-karakterláncait összefűzési módszerekkel és sablonliterálokkal.

Karakterlánc összefűzése

A JavaScript lehetővé teszi a karakterláncok összefűzését többféle megközelítéssel. Hasznos megközelítés a concat() módszer. Ez a módszer két vagy több karakterláncot használ. Egyetlen hívó karakterláncot használ, és argumentumként egy vagy több karakterláncot vesz fel.

const firstName = "John"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName.concat(" ", lastName); 
console.log(stringVal);

Itt a concat a karakterlánc argumentumokat (üres szóköz és vezetéknév) a hívó karakterlánchoz (firstName) kapcsolja. A kód ezután a kapott új karakterláncot egy változóban (stringVal) tárolja és kiírja az új értéket a böngésző konzolra :

hogyan lehet megmondani egy kép dpi -jét

A karakterláncok gyűjteményének egy másik módja a plusz operátor használata. Ez a módszer lehetővé teszi a karakterlánc-változók és a karakterlánc-literálok kombinálását új karakterláncok létrehozásához.

const firstName = "John"; 
const middleName = "Mike"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName + " " + middleName + " " + lastName; 
console.log(stringVal);

A fenti kód a következő kimenetet nyomtatja ki a konzolra:

Plusz operátori karakterlánc összefűzése

A JavaScript-karakterláncok összekapcsolásának harmadik megközelítése plusz és egyenlőségjel használatát igényli. Ez a módszer lehetővé teszi egy új karakterlánc hozzáadását egy meglévő karakterlánc végéhez.

beszéd szövegre szoftver ingyenesen letölthető a Windows 10 rendszerhez

const firstName = "John"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName; 
stringVal += " "; 
stringVal += lastName; 
  
console.log(stringVal);

Ez a kód egy üres szóközt és a LastName változó értékét fűzi a firstName változóhoz, és a következő kimenetet eredményezi:

Plusz és egyenlő operátorok a karakterláncon

Sablon Literals

A sablonliterálok egy ES6 szolgáltatás, amely lehetővé teszi a JavaScript karakterláncok formázását. A sablonliterál egy pár backtick-et (`) használ a karakterláncok megjelenítéséhez. Ez a karakterlánc-formázási módszer lehetővé teszi, hogy tisztább többsoros karakterláncokat jelenítsen meg JavaScriptben.

let html; 
  
html = `<ul> 
       <li> Name: John Doe </li> 
       <li> Age: 24 </li> 
       <li> Job: Software Engineer </li> 
       </ul>`; 
  
document.body.innerHTML = html;

A fenti JavaScript kódot használja HTML három elemből álló lista nyomtatásához a böngészőben:

Ahhoz, hogy ugyanazt a kimenetet sablonliterálok nélkül (vagy a sablonliterálok előtt) érje el, idézőjeleket kell használnia. A kódot azonban nem tudja több sorra kiterjeszteni, mint a sablonliteráloknál.

keresse meg, ki rendelkezik telefonszámmal

let html; 
  
html = "<ul><li>Name: John Doe</li><li>Age: 24</li><li>Job: Software Engineer</li></ul>"; 
  
document.body.innerHTML = html;

String interpoláció

A sablonliterálok segítségével kifejezéseket használhat a JavaScript-karakterláncokban az interpolációnak nevezett folyamaton keresztül. A karakterlánc-interpolációval kifejezéseket vagy változókat ágyazhat be a karakterláncokba a ${expression} helykitöltő. Itt válik igazán nyilvánvalóvá a JavaScript-sablon literálok értéke.

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;

A fenti kód a következő kimenetet hozza létre a konzolban:

Az első négy érv a ${expression} helyőrző karakterláncváltozók, de az ötödik feltételes kifejezés. A kifejezés az egyik változó értékére (tapasztalat) támaszkodik, hogy megszabja, mit jelenítsen meg a böngészőben.

Weboldalán lévő elemek formázása JavaScript segítségével

A weboldalfejlesztéssel való funkcionális kapcsolaton kívül a JavaScript a HTML-lel együttműködve befolyásolja a weboldal tervezését és elrendezését. Képes manipulálni a weboldalon megjelenő szöveget, akárcsak a sablonliterálok esetében.

Még a HTML-t is képes konvertálni képekké és megjeleníteni egy weboldalon.