JavaScript String Format: Metoder med EKSEMPLER

Hvad er JavaScript strengformat?

JavaScript-strengformat refererer til de metoder, der kan bruges til at manipulere og formatere strenge i en defineret form. Det er et afgørende træk ved ethvert programmeringssprog, der tillader dig at have kontrol over den tekst, der vises i din ansøgning.

I din JavaScript-kode, strengformatering kan transformere komplekse data på en enkel måde. Det forbedrer også outputlæsbarheden og gør koden mere vedligeholdelsesvenlig. Derudover korrekt formateret JavaScriptstrenge kan også spille en rolle i at forbedre brugeroplevelsen af ​​applikationen.

Sådan formateres strenge i JavaManuskript?

For at formatere en streng i JavaScript, følg de angivne trin:

Trin 1) Først er det nødvendigt at bestemme de data, du vil inkludere i strengen.

Trin 2) Vælg derefter en metode til at formatere streng i JS.

Trin 3) Skriv koden til dens implementering i overensstemmelse hermed.

Trin 4) Test koden for at sikre, at den genererer det forventede output.

Trin 5) Opdater eller modificer koden for at opfylde de yderligere formateringsbehov eller krav.

Trin 6) Refaktorer koden for vedligeholdelse og læsbarhed.

Forskellige strengformateringsmetoder i JavaScript

Der findes flere måder at formatere strenge på JavaScript, herunder sammenkædningsoperatorer, bogstaver i skabeloner, regulære udtryk og mere.

I det næste afsnit vil du udforske følgende tilgange:

• {} Brackets med backticks
• "+" OperaTor
• Brugerdefineret funktion String Formatering
• Sammenkædningsoperatør
• Skabelon bogstaver
• Almindelig udtryk
• Tilpasset funktion
• Ternary operatør

Metode 1: Brug af {} Brackets med backticks til at formatere streng i JavaScript

I denne metode kan du bruge skabelon bogstaver ved at tilføje backticks (`) for at omslutte en streng. Indsæt derefter variabler for strengargumenterne i parentes {} foran et dollartegn "$". Disse skabeloner giver dig mulighed for at indlejre udtryk i en streng-literal.

Denne operation hjælper med at sammenkæde variable kaldet pladsholdere og andre definerede værdier. Resultatet er, at den endelige formaterede streng opnås ved at interpolere værdierne af pladsholdere.

For eksempel har vi oprettet to variable, "navn"Og"id” og derefter omsluttet dem i backticks for at generere det formaterede output. Bemærk, at "${}” syntaks bruges til at indlejre udtrykkene med strengen.

Kode:

const name = "Jenny";
const id = 1;
console.log (`Welcome ${name}, your ID is ${id}`);

Det kan ses, at værdierne for pladsholderens "navn" og "id" er blevet vist, hvilket betyder, at strenginterpolation er blevet udført med succes.

Output:

Welcome Jenny, your ID is 1

Metode 2: Brug + Operator til at formatere streng i JavaScript

Den anden tilgang er at bruge Sammenkædningsoperatør "+" for grundlæggende formatering af strenge i JavaManuskript. Denne måde involverer at sammenkæde de individuelle variabler og strenge sammen for at generere det ønskede output.

For eksempel har vi nu brugt "+"-operatoren til at sammenkæde de samme variabelværdier, og "console.log()"-metoden vil returnere en formateret streng på konsollen.

Kode:

const name = "Jenny";
const id = 1;
console.log("Welcome " + name + ", your ID is " + id);

Output:

Welcome Jenny, your ID is 1

Metode 3: Brugerdefineret funktion Strengformatering i JavaScript

I din JavaScript program, kan du også bruge den brugerdefinerede funktion streng formatering tilgang. I denne teknik accepterer funktionen de ønskede variabler og returnerer den formaterede streng. Denne formatfunktion tilbyder også en masse fleksibilitet. Du kan også bruge det til at opfylde brugerdefinerede eller komplekse formateringskrav.

Her har vi lavet en brugerdefineret formatfunktion ved navn "velkommenbesked()" der accepterer to variable "navn"Og"id” som argumenter og output formaterede strenge ved at bruge skabelonstrengen literals.

Derefter definerede vi de ønskede variabler og sendte dem i formatet brugerdefinerede dannelsesfunktionskald.

Kode:

function welcomeMsg(name, id) {
  return `Welcome ${name}, your ID is ${id}`;
}
const name = "Jenny";
const id = 1;
const msg = welcomeMsg(name, id);
console.log(msg);

Output:

Welcome Jenny, your ID is 1

Metode 4: Brug af sammenkædning til formatstreng i JavaScript

sammenkædning er en simpel metode, der bruges til at formatere strenge i JavaManuskript. Denne tilgang involverer at kombinere strengvariabler eller flere strenge sammen ved hjælp af sammenkædningsoperatoren "+”. Du kan også bruge denne teknik til simple strengsammenkædningsopgaver.

I det angivne eksempel er variablerne "fornavn"Og"efternavn" vil blive sammenkædet ved hjælp af "+"-operatoren for at danne "fulde navn” streng som følger.

Kode:

var firstName = "Alex";
var lastName = "Edward";
var fullName = firstName + " " + lastName;
console.log(fullName);

Output:

Alex Edward

Metode 5: Brug af skabelonliterals til formatstreng i JavaScript

Skabelonstrenge som også er kendt som Skabelon bogstaver tilbyde en mere udtryksfuld og avanceret måde at formatere strenge på JavaManuskript. De tillader direkte indlejring af udtryk og variabler i strengen ved hjælp af pladsholderen "${expression}".

Desuden giver skabelon literal også støtte til flerlinjet strenge.

Kode:

var name = "Alex";
var age = 30;
var msg = `Hi, ${name}! You are ${age} years old.`;
console.log(msg);

I ovenstående eksempel har vi direkte interpoleret variablen "navn"Og"alder" i strengen ved at bruge pladsholderne "${}” inden for backticks (`) af skabelonens bogstaver.

Output:

Hi, Alex! You are 30 years old.

Metode 6: Brug af regulære udtryk til at formatere streng i JavaScript

In JavaScript kode, Regelmæssige udtryk er det robuste værktøj, der bruges til strengmanipulation og mønstertilpasning. Desuden bruges de også til at finde det givne mønster og erstatte dem med definerede værdier. Denne operation kan udføres ved hjælp af "erstatte ()”Metode.

Tjek nedenstående program, erstatte () metoden bruges med to regulære udtryk, der vil erstatte pladsholderne "[navn]"Og"[id]” med den respektive værdi.

Kode:

let name = "Jenny";
let id = 1;
let message = "Welcome [name], your ID is [id]".replace(/\[name\]/g, name).replace(/\[id\]/g, id);
console.log(message);

Dette resulterer i et nyt strengobjekt, der vil blive gemt i "beskedvariabel logget på konsollen som output.

Output:

Welcome Jenny. Your ID is 1

Metode 7: Brug af en brugerdefineret funktion til at formatere streng i JavaScript

Du kan også oprette et mere genanvendeligt og tilpasset strengformat i JavaManuskript. For at gøre det skal du definere en ny brugerdefineret funktion der accepterer en streng og andre parametre. Du kan kalde det for at erstatte pladsholdere eller anvende tilpassede formateringsregler. Denne teknik understøtter også tilpasset formatering i komplekse formateringsscenarier.

Her har vi lavet et nyt brugerdefineret funktionsformat med navnet "formatstreng", der accepterer en "streng"Og"params"(matrix af parametre) som argumenter.

Inden for funktionslegemet har vi påberåbt "udskift ()" metode med et regulært udtryk til at erstatte pladsholdere "0 {}, 1 {}” med deres respektive værdier fra parameterarrayet.

Kode:

function formatString(string, params) {
  return string.replace(/{(\d+)}/g, (match, index) => {
    return typeof params[index] !== 'undefined' ? params[index] : match;
  });
}
var name = "Alex";
var age = 30;
var formattedMsg = formatString("Hi, {0}! You are {1} years old.", [name, age]);
console.log(formattedMsg); 

Output:

Hi, Alex! You are 30 years old.

Metode 8: Brug af ternær Operator til at formatere streng i JavaScript

JavaScript Ternary operatør er en stenografi til at skrive betingede udtryk på strenge. Det kan dog også bruges til strengformatering ved betinget at vælge en af ​​to værdier i henhold til det angivne booleske udtryk og returnere strengen.

Syntaks:

condition ? expressionIfTrue : expressionIfFalse

Tag et kig på denne eksempelkode for at bruge en ternær operator til at formatere til et strengobjekt.

Kode:

let name = "Jenny";
let isAdmin = true;
let msg = `Welcome ${name}${isAdmin ? ", you are an admin" : ""}`;
console.log(msg);

Output:

Welcome Jenny, you are an admin

Her har vi defineret to variable "navn"Og"er Admin" med værdierne "Jenny"Og"sand", henholdsvis.

Derefter brugte vi den ternære operator til betinget at tilføje strengen ", du er administrator” til meddelelsesstrengen, hvis værdien af ​​den valgfri parameter “isAdmin” er sand, som angivet ovenfor.

Sammenligning af JavaScript String Format Methods

Her har vi samlet fordele og ulemper ved ovenstående JavaScript streng format metoder:

Metode	Fordele	Ulemper
Brackets {} med backticks (`)	• Let at bruge. • Kortfattet og læsbar kode.	Det er muligvis ikke passende til mere komplekse formateringskrav.
"+" operatør	Let at forstå.	Kan være ineffektiv til mere komplekse formateringskrav.
Brugerdefineret funktion til strengformatering	Tilbyder en masse fleksibilitet.	Kræver mere kodningsindsats.
sammenkædning OperaTor	Enkelt og bredt understøttet.	Besværligt for kompleks strengformatering.
Skabelonlitteratur	• Understøtter multi-line strenge. • Readable og intuitiv syntaks.	Begrænset kontrol over formateringsmuligheder.
Regelmæssige udtryk	Giv en masse fleksibilitet.	Forskellig implementering og vedligeholdelse sammenlignet med andre metoder.
Tilpasset funktion	Giver en masse fleksibilitet.	Har brug for yderligere kodning for at oprette og vedligeholde en brugerdefineret funktion.
Ternary operatør	Kortfattet måde at håndtere nul- eller udefinerede værdier på.	Det er muligvis ikke egnet til mere komplekse formateringskrav.

Bemærk, at valget af metode i høj grad afhænger af den specifikke brugssituation og de relevante krav til din JavaScript kode.

Konklusion

In JavaScript, kan du bruge skabelonliterals, den ternære operator, "+”-operator, regulære udtryk og den brugerdefinerede funktion til at formatere strenge. Disse strengformatmetoder tillader udviklere at manipulere og præsentere tekstdata på en effektiv måde.

Vælg derfor den rigtige metode baseret på læsbarhed, ydeevne og browserkompatibilitet. Det giver udviklere mulighed for at forbedre brugeroplevelser og opnå ønskede formateringsstandarder.