Wie formatiert man einen String in JavaScript?

In JavaScript ist ein String eine Gruppe von Zeichen, die entweder von einem Paar einfacher oder doppelter Anführungszeichen eingeschlossen sind. Es gibt viele Möglichkeiten, Strings in JavaScript zu formatieren.

Sie können bestimmte Methoden oder Operatoren verwenden, um Zeichenfolgen zu kombinieren. Sie können sogar bestimmte Operationen ausführen, um zu entscheiden, welche Zeichenfolge wo und wann angezeigt wird.

Erfahren Sie, wie Sie Ihre JavaScript-Zeichenfolgen mithilfe von Verkettungsmethoden und Vorlagenliteralen formatieren.

String-Verkettung

JavaScript ermöglicht es Ihnen, Zeichenfolgen mit mehreren Ansätzen zu verketten. Ein sinnvoller Ansatz ist die

const Vorname = "John";
const Nachname = "Damhirschkuh";
lassen stringVal;
stringVal = firstName.concat("", Familienname, Nachname);
Konsole.log (stringVal);

Hier verbindet concat die String-Argumente (ein Leerzeichen und lastName) mit dem aufrufenden String (firstName). Der Code speichert dann die resultierende neue Zeichenfolge in einer Variablen (stringVal) und gibt den neuen Wert an die Browserkonsole aus:

Eine andere Möglichkeit, eine Sammlung von Zeichenfolgen zu verketten, ist die Verwendung des Plus-Operators. Mit dieser Methode können Sie Zeichenfolgenvariablen und Zeichenfolgenliterale kombinieren, um neue Zeichenfolgen zu erstellen.

const Vorname = "John";
const mittlererName = "Mike";
const Nachname = "Damhirschkuh";
lassen stringVal;
stringVal = Vorname + "" + zweiter Vorname + "" + Nachname;
Konsole.log (stringVal);

Der obige Code gibt die folgende Ausgabe an die Konsole aus:

Ein dritter Ansatz zum Verketten Ihrer JavaScript-Strings erfordert die Verwendung eines Plus- und eines Gleichheitszeichens. Mit dieser Methode können Sie eine neue Zeichenfolge am Ende einer vorhandenen hinzufügen.

const Vorname = "John";
const Nachname = "Damhirschkuh";
lassen stringVal;
stringVal = Vorname;
stringVal += "";
stringVal += Nachname;
Konsole.log (stringVal);

Dieser Code fügt ein Leerzeichen und den Wert der lastName-Variablen an die firstName-Variable an und erzeugt die folgende Ausgabe:

Vorlagenliterale

Vorlagenliterale sind eine ES6-Funktion, mit der Sie JavaScript-Strings formatieren können. Ein Vorlagenliteral verwendet ein Paar Backticks (`), um Zeichenfolgen anzuzeigen. Diese Methode der Zeichenfolgenformatierung ermöglicht es Ihnen, sauberere mehrzeilige Zeichenfolgen in JavaScript anzuzeigen.

lassen html;
html = `<Ul>
<li> Name: John Doe </li>
<li> Alter: 24 </li>
<li> Arbeit: Softwareingenieur </li>
</ul>`;
dokumentieren.körper.innerHTML = html;

Der obige JavaScript-Code verwendet HTML So drucken Sie eine Liste mit drei Elementen im Browser:

Um dieselbe Ausgabe ohne Vorlagenliterale (oder vor Vorlagenliteralen) zu erzielen, müssten Sie Anführungszeichen verwenden. Sie könnten den Code jedoch nicht über mehrere Zeilen erweitern, wie dies bei Vorlagenliteralen möglich ist.

lassen html;
html= "<Ul><li>Name: John Doe</li><li>Alter: 24</li><li>Arbeit: Softwareingenieur</li></ul>";
dokumentieren.körper.innerHTML = html;

String-Interpolation

Vorlagenliterale ermöglichen Ihnen die Verwendung von Ausdrücken in Ihren JavaScript-Strings durch einen Prozess namens Interpolation. Mit der String-Interpolation können Sie Ausdrücke oder Variablen mithilfe von in Ihre Strings einbetten ${Ausdruck} Platzhalter. Hier wird der Wert von JavaScript-Template-Literalen wirklich deutlich.

Lassen Sie Benutzername = "Jane Doe";
lassen Alter = 21;
Job lassen = "Web-Entwickler";
lassen Erfahrung = 3;
lassen html;
html = `<Ul>
<li> Name: ${Benutzername} </li>
<li> Alter: ${age} </li>
<li> Berufsbezeichnung: ${job} </li>
<li> Jahre Erfahrung: ${experience} </li>
<li> Entwicklerlevel: ${experience < 5? "Junior bis Mittelstufe": "Senior"} </li>
</ul>`;
dokumentieren.körper.innerHTML = html;

Der obige Code erzeugt die folgende Ausgabe in der Konsole:

Die ersten vier Argumente der ${Ausdruck} Platzhalter sind String-Variablen, aber der fünfte ist ein bedingter Ausdruck. Der Ausdruck stützt sich auf den Wert einer der Variablen (Erfahrung), um festzulegen, was er im Browser anzeigen soll.

Elemente auf Ihrer Webseite mit JavaScript formatieren

Abgesehen von seiner funktionalen Verbindung mit der Entwicklung von Webseiten arbeitet JavaScript mit HTML zusammen, um das Design und Layout einer Webseite zu beeinflussen. Es kann den Text manipulieren, der auf einer Webseite erscheint, wie es bei Template-Literalen der Fall ist.

Es kann sogar HTML in Bilder konvertieren und diese auf einer Webseite anzeigen.