Hvordan formaterer du en streng i JavaScript?

I JavaScript er en streng en gruppe tegn omgitt av enten et par enkle eller doble anførselstegn. Det er mange måter å formatere strenger på i JavaScript.

Du kan bruke spesifikke metoder eller operatorer for å kombinere strenger. Du kan til og med utføre spesifikke operasjoner for å bestemme hvilken streng som skal vises hvor og når.

MAKEUSE AV DAGENS VIDEO

Lær hvordan du formaterer JavaScript-strengene dine ved å bruke sammenkoblingsmetoder og bokstavmaler.

Windows 10 stopper programmet fra å kjøre ved oppstart

Sammenknytting av strenger

JavaScript lar deg sette sammen strenger ved hjelp av flere tilnærminger. En nyttig tilnærming er concat() metode. Denne metoden bruker to eller flere strenger. Den bruker en enkelt kallestreng og tar en eller flere strenger som argumenter.

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

Her kobler concat sammen strengargumentene (et tomt mellomrom og etternavn) til den kallende strengen (fornavn). Koden lagrer deretter den resulterende nye strengen i en variabel (stringVal) og skriver ut den nye verdien til nettleserkonsollen :

En annen måte å sette sammen en samling strenger på er å bruke plussoperatoren. Denne metoden lar deg kombinere strengvariabler og strengliteraler for å lage nye strenger.

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

Koden ovenfor skriver ut følgende utdata til konsollen:

En tredje tilnærming til å sammenkoble JavaScript-strengene dine krever bruk av pluss- og likhetstegn. Denne metoden lar deg legge til en ny streng på slutten av en eksisterende.

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

Denne koden legger til et tomt mellomrom og verdien av lastName-variabelen til firstName-variabelen, og produserer følgende utdata:

hvordan sette iphone 6 i gjenopprettingsmodus

Malbokstaver

Literal mal er en ES6-funksjon som lar deg formatere JavaScript-strenger. En bokstavmal bruker et par backticks (`) for å vise strenger. Denne metoden for strengformatering lar deg vise renere flerlinjestrenger i JavaScript.

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

JavaScript-koden ovenfor bruker HTML for å skrive ut en liste over tre elementer i nettleseren:

For å oppnå samme utdata uten mal-literal (eller før mal-literals), må du bruke anførselstegn. Du vil imidlertid ikke kunne utvide koden over flere linjer som du kan med bokstavmaler.

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

Strengeinterpolasjon

Literal mal lar deg bruke uttrykk i JavaScript-strengene dine gjennom en prosess som kalles interpolering. Med strenginterpolasjon kan du legge inn uttrykk eller variabler i strengene dine ved å bruke ${expression} plassholder. Det er her verdien av bokstaver i JavaScript-maler blir virkelig tydelig.

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;

Koden ovenfor produserer følgende utgang i konsollen:

De fire første argumentene til ${expression} plassholder er strengvariabler, men den femte er et betinget uttrykk. Uttrykket er avhengig av verdien av en av variablene (erfaring), for å diktere hva den skal vise i nettleseren.

Formatering av elementer på nettsiden din med JavaScript

Bortsett fra den funksjonelle tilknytningen til nettsideutvikling, fungerer JavaScript med HTML for å påvirke utformingen og utformingen av en nettside. Det kan manipulere teksten som vises på en nettside, slik tilfellet er med bokstavmaler.

Den kan til og med konvertere HTML til bilder og vise dem på en nettside.