Hvordan formaterer du en streng i JavaScript?

I JavaScript er en streng en gruppe af tegn omgivet af enten et par enkelte eller dobbelte anførselstegn. Der er mange måder at formatere strenge på i JavaScript.

Du kan bruge bestemte metoder eller operatorer til at kombinere strenge. Du kan endda udføre specifikke handlinger for at bestemme, hvilken streng der skal vises hvor og hvornår.

MAKEUSE AF DAGENS VIDEO

Lær, hvordan du formaterer dine JavaScript-strenge ved hjælp af sammenkædningsmetoder og skabelonliteral.

hvordan man installerer apple watch band

Sammenkædning af strenge

JavaScript giver dig mulighed for at sammenkæde strenge ved hjælp af flere tilgange. En nyttig tilgang er concat() metode. Denne metode bruger to eller flere strenge. Den bruger en enkelt kaldende streng og tager en eller flere strenge som argumenter.

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

Her forbinder concat strengargumenterne (et tomt mellemrum og efternavn) til den kaldende streng (fornavn). Koden gemmer derefter den resulterende nye streng i en variabel (stringVal) og udskriver den nye værdi til browserkonsollen :

En anden måde at sammenkæde en samling af strenge på er ved at bruge plus-operatoren. Denne metode giver dig mulighed for at kombinere strengvariabler og strengliteraler for at skabe nye strenge.

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

Koden ovenfor udskriver følgende output til konsollen:

En tredje tilgang til at sammenkæde dine JavaScript-strenge kræver brugen af et plus- og lighedstegn. Denne metode giver dig mulighed for at tilføje en ny streng til slutningen af en eksisterende.

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

Denne kode tilføjer et tomt mellemrum og værdien af lastName-variablen til firstName-variablen, hvilket producerer følgende output:

hvordan man sætter iphone 6 i genoprettelsesfunktion

Skabelon bogstaver

Skabelonliterals er en ES6-funktion, der giver dig mulighed for at formatere JavaScript-strenge. En skabelon literal bruger et par backticks (`) til at vise strenge. Denne metode til strengformatering giver dig mulighed for at vise renere flerliniestrenge 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 bruger HTML for at udskrive en liste over tre elementer i browseren:

For at opnå det samme output uden skabelonliteral (eller før skabelonliterals), skal du bruge anførselstegn. Du ville dog ikke være i stand til at udvide koden over flere linjer, som du kan med skabelonliteral.

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

Strenginterpolation

Skabelonliteraler lader dig bruge udtryk i dine JavaScript-strenge gennem en proces kaldet interpolation. Med strenginterpolation kan du indlejre udtryk eller variable i dine strenge ved hjælp af ${expression} pladsholder. Det er her, værdien af bogstaver i JavaScript-skabelonen virkelig bliver 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 producerer følgende output i konsollen:

De første fire argumenter i ${expression} pladsholder er strengvariable, men den femte er et betinget udtryk. Udtrykket er afhængig af værdien af en af variablerne (erfaring), for at diktere, hvad den skal vise i browseren.

Formatering af elementer på din webside med JavaScript

Udover dets funktionelle tilknytning til websideudvikling, arbejder JavaScript med HTML for at påvirke design og layout af en webside. Det kan manipulere teksten, der vises på en webside, som det er tilfældet med skabeloner.

Det kan endda konvertere HTML til billeder og vise dem på en webside.