JavaScript String Format: Methoden met VOORBEELDEN

Door: James Hartman James Hartman
Hours Bijgewerkt

Wat is JavaScript String-indeling?

JavaScript String format verwijst naar de benaderingen die kunnen worden gebruikt voor het manipuleren en formatteren van strings in een gedefinieerde vorm. Het is een cruciale functie van elke programmeertaal die u controle geeft over de tekst die in uw applicatie verschijnt.

In uw JavaScriptcode, string-opmaak kan complexe data op een eenvoudige manier transformeren. Het verbetert ook de leesbaarheid van de output en maakt de code beter te onderhouden. Bovendien, correct geformatteerd JavaScriptreeksen kunnen ook een rol spelen bij het verbeteren van de gebruikerservaring van de applicatie.

Tekenreeksen opmaken JavaScript?

Om een ​​string op te maken JavaScript, volg de aangegeven stappen:

Stap 1) Eerst moet u bepalen welke gegevens u in de string wilt opnemen.

Stap 2) Selecteer vervolgens een methode om de tekenreeks in JS op te maken.

Stap 3) Schrijf de code voor de implementatie dienovereenkomstig.

Stap 4) Test de code om er zeker van te zijn dat deze de verwachte uitvoer genereert.

Stap 5) Update of wijzig de code om aan de aanvullende opmaakbehoeften of -vereisten te voldoen.

Stap 6) Refactoreer de code voor onderhoudbaarheid en leesbaarheid.

Verschillende methoden voor het formatteren van tekenreeksen in JavaScript

Er bestaan ​​meerdere manieren om tekenreeksen op te maken JavaScript, inclusief samenvoegingsoperatoren, sjabloonliteralen, reguliere expressies en meer.

In het volgende gedeelte gaan we de volgende benaderingen onderzoeken:

  • {} Brackets met backticks
  • "+" Operator
  • Aangepaste functie Tekenreeksopmaak
  • Samenvoegingsoperator
  • Sjabloonletters
  • Reguliere expressie
  • Aangepaste functie
  • Ternaire operator

Methode 1: {} gebruiken Brackets met backticks om tekenreeks op te maken JavaScript

Bij deze methode kunt u gebruiken sjabloon letterlijke door toevoeging terugslag (`) om een ​​string in te sluiten. Voeg vervolgens variabelen van de stringargumenten in haakjes {} in, voorafgegaan door een dollarteken “$”. Met deze sjablonen kunt u expressies in een stringliteral insluiten.

Deze bewerking helpt variabelen aaneen te schakelen die tijdelijke aanduidingen worden genoemd en andere gedefinieerde waarden. De uiteindelijke geformatteerde string wordt verkregen door de waarden van tijdelijke aanduidingen te interpoleren.

We hebben bijvoorbeeld twee variabelen gemaakt: “naam"En"id' en plaatste ze vervolgens in backticks voor het genereren van de opgemaakte uitvoer. Merk op dat de “${}De syntaxis wordt gebruikt voor het insluiten van de expressies in de tekenreeks.

Code:

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

U kunt zien dat de waarden van de tijdelijke aanduiding ‘naam’ en ‘id’ zijn weergegeven, wat betekent dat de stringinterpolatie succesvol is uitgevoerd.

Output:

Welcome Jenny, your ID is 1

GERELATEERDE ARTIKELEN

Methode 2: + gebruiken Operator om tekenreeks op te maken JavaScript

De tweede benadering is het gebruik van de Samenvoegingsoperator "+” voor basisopmaaktekenreeksen in JavaScript. Deze manier omvat het samenvoegen van de individuele variabelen en strings om de gewenste output te genereren.

We hebben bijvoorbeeld de operator “+” gebruikt om dezelfde variabelewaarden aan elkaar te koppelen, en de methode “console.log()” retourneert een geformatteerde string op de console.

Code:

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

Output:

Welcome Jenny, your ID is 1

Methode 3: Aangepaste functie Tekenreeksopmaak in JavaScript

In uw JavaScriptprogramma, kunt u ook de aangepaste functie string formatteringsbenadering gebruiken. Bij deze techniek accepteert de functie de gewenste variabelen en retourneert de geformatteerde string. Deze formatteringsfunctie biedt ook veel flexibiliteit. U kunt het ook gebruiken om te voldoen aan aangepaste of complexe formatteringsvereisten.

Hier hebben we een aangepaste opmaakfunctie gemaakt met de naam “welkomMsg()” dat twee variabelen accepteert “naam"En"id' als argumenten en voert geformatteerde tekenreeksen uit door gebruik te maken van de letterlijke tekenreeksen van de sjabloon.

Daarna hebben we de gewenste variabelen gedefinieerd en deze doorgegeven in het formaat aangepaste formatiefunctieaanroep.

Code:

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

Methode 4: Aaneenschakeling gebruiken voor opmaaktekenreeks in JavaScript

Aaneenschakeling is een eenvoudige methode die wordt gebruikt voor het formatteren van tekenreeksen in JavaScript. Deze aanpak omvat het combineren van stringvariabelen of meerdere strings met behulp van de concatenatie-operator “+”. U kunt deze techniek ook gebruiken voor eenvoudige tekenreeksaaneenschakelingstaken.

In het gegeven voorbeeld zijn de variabelen “Voornaam"En"achternaam" wordt met behulp van de operator "+" aan elkaar gekoppeld om de "voor-en achternaam”reeks als volgt.

Code:

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

Output:

Alex Edward

Methode 5: Sjabloonletterlijke waarden gebruiken voor opmaaktekenreeks in JavaScript

Sjabloonreeksen die ook wel bekend staan ​​als Sjabloonletters bieden een meer expressieve en geavanceerde manier om tekenreeksen op te maken JavaScript. Ze staan ​​de directe inbedding van expressies toe en variabelen binnen de tekenreeks met behulp van de tijdelijke aanduiding “${uitdrukking}'.

Bovendien biedt letterlijke sjabloon ook ondersteuning voor de meerregelige tekenreeksen.

Code:

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

In het bovenstaande voorbeeld hebben we de variabele “naam"En"leeftijd” binnen de tekenreeks door gebruik te maken van de tijdelijke aanduidingen “${}” binnen de backticks (`) van de letterlijke waarden van de sjabloon.

Output:

Hi, Alex! You are 30 years old.

Methode 6: Reguliere expressies gebruiken om tekenreeksen op te maken JavaScript

In JavaScriptcode, Normale uitdrukkingen zijn de robuuste tool die wordt gebruikt voor stringmanipulatie en patroonmatching. Bovendien worden ze ook gebruikt om het gegeven patroon te vinden en te vervangen door gedefinieerde waarden. Deze bewerking kan worden uitgevoerd met behulp van de "vervangen ()”Methode.

Bekijk het onderstaande programma, de methode Replace () wordt gebruikt met twee reguliere expressies die de tijdelijke aanduidingen “[naam]"En"[ID kaart]” met de betreffende waarde.

Code:

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

Dit resulteert in een nieuw stringobject dat wordt opgeslagen in de map “bericht'variabele aangemeld op de console als uitvoer.

Output:

Welcome Jenny. Your ID is 1

Methode 7: Een aangepaste functie gebruiken voor Format String in JavaScript

U kunt ook een meer herbruikbaar en aangepast tekenreeksformaat maken in JavaScript. Om dit te doen, definieert u een nieuw aangepaste functie die een string en andere parameters accepteert. U kunt het aanroepen om tijdelijke aanduidingen te vervangen of aangepaste opmaakregels toe te passen. Deze techniek ondersteunt ook aangepaste opmaak in complexe opmaakscenario's.

Hier hebben we een nieuw aangepast functieformaat gemaakt met de naam “formatString'die een' accepteertsnaar"En"params'(reeks van parameters) als argumenten.

Binnen het functielichaam hebben we een beroep gedaan op de “vervangen ()” methode met een reguliere expressie voor het vervangen van tijdelijke aanduidingen “0 {}, 1 {}” met hun respectieve waarden uit de parameterarray.

Code:

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.

Methode 8: Ternair gebruiken Operator om tekenreeks op te maken JavaScript

JavaScript Ternaire operator is een verkorte manier voor het schrijven van voorwaardelijke expressies op tekenreeksen. Het kan echter ook worden gebruikt voor het opmaken van tekenreeksen door voorwaardelijk een van de twee waarden te selecteren op basis van de opgegeven Booleaanse expressie en de tekenreeks terug te geven.

Syntax:

condition ? expressionIfTrue : expressionIfFalse

Bekijk deze voorbeeldcode waarin een ternaire operator wordt gebruikt om een ​​tekenreeksobject op te maken.

Code:

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

Hier hebben we twee variabelen gedefinieerd “naam"En"isAdmin” met de waarden “Jenny"En"waar”, respectievelijk.

Daarna hebben we de ternaire operator gebruikt om voorwaardelijk de string ", je bent een beheerder” toe aan de berichtreeks als de waarde van de optionele parameter “isAdmin” waar is, zoals hierboven vermeld.

Vergelijking van JavaScript String Format-methoden

Hier hebben we de voor- en nadelen van het hierboven besprokene op een rij gezet JavaMethoden voor het opmaken van scriptreeksen:

Methode Voordelen Nadelen
Brackets {} met backticks (`) • Makkelijk te gebruiken.
• Bondige en leesbare code. 		Het is mogelijk niet geschikt voor complexere opmaakvereisten.
“+”-operator Makkelijk te begrijpen. Kan inefficiënt zijn bij complexere opmaakvereisten.
Aangepaste functie voor tekenreeksopmaak Biedt veel flexibiliteit. Vereist meer codeerinspanning.
Aaneenschakeling Operator Eenvoudig en breed ondersteund. Moeilijk voor complexe tekenreeksopmaak.
Sjabloonliteratuur • Ondersteunt tekenreeksen met meerdere regels.
• Readable en intuïtieve syntaxis. 		Beperkte controle over opmaakopties.
Normale uitdrukkingen Zorg voor veel flexibiliteit. Verschillende implementatie en onderhoud in vergelijking met andere methoden.
Aangepaste functie Biedt veel flexibiliteit. Heeft aanvullende codering nodig voor het maken en onderhouden van een aangepaste functie.
Ternaire operator Beknopte manier voor het verwerken van null- of ongedefinieerde waarden. Het is mogelijk niet geschikt voor complexere opmaakvereisten.

Houd er rekening mee dat de selectie van de methode sterk afhangt van de specifieke gebruikssituatie en de relevante vereisten van uw JavaScriptcode.

Conclusie

In JavaScript, kunt u sjabloonliteralen gebruiken, de ternaire operator, “+” operator, reguliere expressies en de aangepaste functie om strings te formatteren. Deze stringformatteringsmethoden stellen ontwikkelaars in staat om tekstuele gegevens op een efficiënte manier te manipuleren en te presenteren.

Selecteer dus de juiste methode op basis van leesbaarheid, prestaties en browsercompatibiliteit. Het stelt ontwikkelaars in staat de gebruikerservaringen te verbeteren en de gewenste opmaakstandaarden te bereiken.

Je houdt misschien van: