JavaSkriptstrengformat: Metoder med EKSEMPLER

Hva er JavaSkriptstrengformat?

JavaSkriptstrengformat refererer til tilnรฆrmingene som kan brukes til รฅ manipulere og formatere strenger i en definert form. Det er en avgjรธrende funksjon i ethvert programmeringssprรฅk som lar deg ha kontroll over teksten som vises i applikasjonen din.

I din JavaSkriptkode, strengformatering kan transformere komplekse data pรฅ en enkel mรฅte. Det forbedrer ogsรฅ utdatalesbarheten og gjรธr koden mer vedlikeholdbar. I tillegg riktig formatert JavaSkriptstrenger kan ogsรฅ spille en rolle i รฅ forbedre brukeropplevelsen av applikasjonen.

Hvordan formatere strenger i JavaManus?

For รฅ formatere en streng i JavaSkript, fรธlg de angitte trinnene:

Trinn 1) Fรธrst er det nรธdvendig รฅ bestemme dataene du vil inkludere i strengen.

Trinn 2) Velg deretter en metode for รฅ formatere streng i JS.

Trinn 3) Skriv koden for implementeringen deretter.

Trinn 4) Test koden for รฅ vรฆre sikker pรฅ at den genererer forventet utgang.

Trinn 5) Oppdater eller modifiser koden for รฅ mรธte de ekstra formateringsbehovene eller kravene.

Trinn 6) Refaktorer koden for vedlikehold og lesbarhet.

Ulike strengformateringsmetoder i JavaScript

Det finnes flere mรฅter รฅ formatere strenger pรฅ JavaSkript, inkludert sammenkoblingsoperatorer, bokstavmaler, regulรฆre uttrykk og mer.

I neste avsnitt vil du utforske fรธlgende tilnรฆrminger:

  • {} Brackets med backticks
  • "+" Operator
  • Egendefinert funksjon Stringformatering
  • Sammenkoblingsoperatรธr
  • Maler bokstaver
  • Vanlig uttrykk
  • Egendefinert funksjon
  • Ternรฆr operatรธr

Metode 1: Bruke {} Brackets med backticks for รฅ formatere streng i JavaScript

I denne metoden kan du bruke mal bokstavelige ved รฅ legge til backticks (`) for รฅ omslutte en streng. Deretter setter du inn variabler for strengargumentene i parentes {} foran med et dollartegn "$". Disse malene lar deg legge inn uttrykk i en streng-literal.

Denne operasjonen hjelper til med รฅ sette sammen variabler kalt plassholdere og andre definerte verdier. Resultatet er at den endelige formaterte strengen oppnรฅs ved รฅ interpolere verdiene til plassholdere.

For eksempel har vi laget to variabler, "navn"Og"idโ€ og deretter omsluttet dem i backticks for รฅ generere den formaterte utgangen. Merk at "${}โ€ syntaks brukes for รฅ bygge inn uttrykkene med strengen.

Kode:

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

Det kan observeres at verdiene til plassholderens "navn" og "id" har blitt vist, noe som betyr at strenginterpolering er utfรธrt vellykket.

Utgang:

Welcome Jenny, your ID is 1

Metode 2: Bruk + Operator til รฅ formatere streng inn JavaScript

Den andre tilnรฆrmingen er รฅ bruke Sammenkoblingsoperatรธr "+" for grunnleggende formateringsstrenger i JavaManus. Denne mรฅten innebรฆrer รฅ sette sammen de individuelle variablene og strengene for รฅ generere รธnsket utgang.

For eksempel har vi nรฅ brukt "+"-operatoren for รฅ sette sammen de samme variabelverdiene, og "console.log()"-metoden vil returnere en formatert streng pรฅ konsollen.

Kode:

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

Utgang:

Welcome Jenny, your ID is 1

Metode 3: Egendefinert funksjon Strengformatering i JavaScript

I din JavaSkriptprogram, kan du ogsรฅ bruke tilnรฆrmingen til tilpasset funksjon strengformatering. I denne teknikken aksepterer funksjonen de รธnskede variablene og returnerer den formaterte strengen. Denne formatfunksjonen tilbyr ogsรฅ mye fleksibilitet. Du kan ogsรฅ bruke den til รฅ oppfylle tilpassede eller komplekse formateringskrav.

Her har vi laget en egendefinert formatfunksjon kalt "velkommenMsg()" som aksepterer to variabler "navn"Og"id" som argumenter og utganger formaterte strenger ved รฅ bruke malstrengen bokstaver.

Etter det definerte vi de รธnskede variablene og sendte dem i formatet tilpasset formasjonsfunksjonskall.

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);

Utgang:

Welcome Jenny, your ID is 1

Metode 4: Bruke sammenkobling for formatstreng i JavaScript

sammenkjeding er en enkel metode som brukes for รฅ formatere strenger i JavaManus. Denne tilnรฆrmingen innebรฆrer รฅ kombinere strengvariabler eller flere strenger sammen ved รฅ bruke sammenkoblingsoperatoren "+". Du kan ogsรฅ bruke denne teknikken for enkle strengsammenkoblingsoppgaver.

I det angitte eksemplet er variablene "fornavn"Og"etternavn" vil bli koblet sammen ved hjelp av "+"-operatoren for รฅ danne "fullt navn" streng som fรธlger.

Kode:

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

Utgang:

Alex Edward

Metode 5: Bruke malbokstaver for formatstreng i JavaScript

Malstrenger som ogsรฅ er kjent som Maler bokstaver tilby en mer uttrykksfull og avansert mรฅte รฅ formatere strenger pรฅ JavaManus. De tillater direkte innebygging av uttrykk og variabler i strengen ved รฅ bruke plassholderen "${expression}".

Dessuten gir template literal ogsรฅ stรธtte til flerlinjestrengene.

Kode:

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

I eksemplet ovenfor har vi direkte interpolert variabelen "navn"Og"alder" i strengen ved รฅ bruke plassholderne "${}โ€ innenfor baksiden (`) av malens bokstaver.

Utgang:

Hi, Alex! You are 30 years old.

Metode 6: Bruke regulรฆre uttrykk for รฅ formatere strenger JavaScript

In JavaSkriptkode, Vanlig uttrykk er det robuste verktรธyet som brukes for strengmanipulering og mรธnstertilpasning. Dessuten brukes de ogsรฅ for รฅ finne det gitte mรธnsteret og erstatte dem med definerte verdier. Denne operasjonen kan gjรธres ved hjelp av "erstatte ()โ€Metoden.

Sjekk ut programmet nedenfor, erstatte ()-metoden brukes med to regulรฆre uttrykk som vil erstatte plassholderne "[Navn]"Og"[id]โ€ med den respektive verdien.

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 nytt strengobjekt som vil bli lagret i "meldingvariabel logget pรฅ konsollen som utdata.

Utgang:

Welcome Jenny. Your ID is 1

Metode 7: Bruke en egendefinert funksjon for Format String in JavaScript

Du kan ogsรฅ lage et mer gjenbrukbart og tilpasset strengformat i JavaManus. For รฅ gjรธre det, definer en ny tilpasset funksjon som godtar en streng og andre parametere. Du kan kalle det for รฅ erstatte plassholdere eller bruke tilpassede formateringsregler. Denne teknikken stรธtter ogsรฅ tilpasset formatering i komplekse formateringsscenarier.

Her har vi laget et nytt tilpasset funksjonsformat kalt "formatString" som godtar en "string"Og"params"(matrise av parametere) som argumenter.

Innenfor funksjonskroppen har vi pรฅkalt "erstatte ()" metode med et regulรฆrt uttrykk for รฅ erstatte plassholdere "0 {}, 1 {}โ€ med sine respektive verdier fra parametermatrisen.

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); 

Utgang:

Hi, Alex! You are 30 years old.

Metode 8: Bruk av ternรฆr Operator til รฅ formatere streng inn JavaScript

JavaScript Ternรฆr operatรธr er en forkortelse for รฅ skrive betingede uttrykk pรฅ strenger. Den kan imidlertid ogsรฅ brukes til strengformatering ved รฅ betinget velge en av to verdier i henhold til det spesifiserte boolske uttrykket og returnere strengen.

Syntaks:

condition ? expressionIfTrue : expressionIfFalse

Ta en titt pรฅ denne eksempelkoden for bruk av en ternรฆr operatรธr for รฅ formatere til et strengobjekt.

Kode:

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

Utgang:

Welcome Jenny, you are an admin

Her har vi definert to variabler "navn"Og"er Admin" med verdiene "Jenny"Og"sant", henholdsvis.

Etter det brukte vi den ternรฆre operatoren for รฅ betinget legge til strengen ", du er administratorโ€ til meldingsstrengen hvis verdien til den valgfrie parameteren โ€œisAdminโ€ er sann, som angitt ovenfor.

Sammenligning av JavaSkriptstrengformatmetoder

Her har vi hentet inn fordelene og ulempene ved de ovenfor omtalte JavaSkriptstrengformatmetoder:

Metode Fordeler Ulemper
Brackets {} med backticks (`) โ€ข Lett รฅ bruke.
โ€ข Konsis og lesbar kode.
Det er kanskje ikke egnet for mer komplekse formateringskrav.
"+" operatรธr Enkelt รฅ forstรฅ. Kan vรฆre ineffektivt for mer komplekse formateringskrav.
Egendefinert funksjon for strengformatering Tilbyr mye fleksibilitet. Trenger mer kodeinnsats.
sammenkjeding Operator Enkelt og bredt stรธttet. Tungt for kompleks strengformatering.
Mallitteratur โ€ข Stรธtter flerlinjede strenger.
โ€ข Readable og intuitiv syntaks.
Begrenset kontroll over formateringsalternativer.
Vanlig uttrykk Gi mye fleksibilitet. Ulik implementering og vedlikehold sammenlignet med andre metoder.
Egendefinert funksjon Gir mye fleksibilitet. Trenger ekstra koding for รฅ lage og vedlikeholde en tilpasset funksjon.
Ternรฆr operatรธr Konsis mรฅte for hรฅndtering av null eller udefinerte verdier. Det er kanskje ikke egnet for mer komplekse formateringskrav.

Merk at valget av metode i stor grad avhenger av den spesifikke brukssaken og de relevante kravene til din JavaSkriptkode.

Konklusjon

In JavaScript, kan du bruke bokstavmaler, den ternรฆre operatoren, "+โ€-operator, regulรฆre uttrykk og den egendefinerte funksjonen for รฅ formatere strenger. Disse strengformatmetodene tillater utviklere รฅ manipulere og presentere tekstdata pรฅ en effektiv mรฅte.

Velg derfor riktig metode basert pรฅ lesbarhet, ytelse og nettleserkompatibilitet. Det gir utviklere mulighet til รฅ forbedre brukeropplevelser og oppnรฅ รธnskede formateringsstandarder.

Oppsummer dette innlegget med: