Hur formaterar du en sträng i JavaScript?

I JavaScript är en sträng en grupp tecken som omges av antingen ett par enkla eller dubbla citattecken. Det finns många sätt att formatera strängar i JavaScript.

Du kan använda specifika metoder eller operatorer för att kombinera strängar. Du kan till och med utföra specifika operationer för att bestämma vilken sträng som ska visas var och när.

Lär dig hur du formaterar dina JavaScript-strängar med hjälp av sammanlänkningsmetoder och mallbokstavar.

Strängsammansättning

JavaScript låter dig sammanfoga strängar med flera metoder. Ett användbart tillvägagångssätt är concat() metod. Denna metod använder två eller flera strängar. Den använder en enda anropssträng och tar en eller flera strängar som argument.

const förnamn = "John";
const efternamn = "Hind";
låta stringVal;
stringVal = förnamn.concat("", efternamn);
trösta.log (stringVal);

Här sammanfogar concat strängargumenten (ett blanksteg och efternamn) till den anropande strängen (förnamn). Koden lagrar sedan den resulterande nya strängen i en variabel (stringVal) och skriver ut det nya värdet till webbläsarkonsolen:

Ett annat sätt att sammanfoga en samling strängar är att använda plusoperatorn. Den här metoden låter dig kombinera strängvariabler och strängliteraler för att skapa nya strängar.

const förnamn = "John";
const mellannamn = "Mikrofon";
const efternamn = "Hind";
låta stringVal;
stringVal = förnamn + "" + mellannamn + "" + efternamn;
trösta.log (stringVal);

Koden ovan skriver ut följande utdata till konsolen:

En tredje metod för att sammanfoga dina JavaScript-strängar kräver användning av ett plus- och likhetstecken. Denna metod låter dig lägga till en ny sträng i slutet av en befintlig.

const förnamn = "John";
const efternamn = "Hind";
låta stringVal;
stringVal = förnamn;
stringVal += "";
stringVal += efternamn;
trösta.log (stringVal);

Den här koden lägger till ett tomt utrymme och värdet på lastName-variabeln till firstName-variabeln, vilket ger följande utdata:

Mallbokstavar

Mall-literals är en ES6-funktion som låter dig formatera JavaScript-strängar. En mall literal använder ett par backticks (`) för att visa strängar. Denna metod för strängformatering låter dig visa renare flerradssträngar i JavaScript.

låta html;
html = `<ul>
<li> Namn: John Doe </li>
<li> Ålder: 24 </li>
<li> Jobb: Mjukvaruingenjör </li>
</ul>`;
dokumentera.body.innerHTML = html;

JavaScript-koden ovan använder HTML för att skriva ut en lista med tre objekt i webbläsaren:

För att uppnå samma utdata utan mallliteral (eller före mallliterals), skulle du behöva använda citattecken. Du skulle dock inte kunna utöka koden över flera rader som du kan med mallbokstavar.

låta html;
html = "<ul><li>Namn: John Doe</li><li>Ålder: 24</li><li>Jobb: Mjukvaruingenjör</li></ul>";
dokumentera.body.innerHTML = html;

Stränginterpolation

Mallliteraler låter dig använda uttryck i dina JavaScript-strängar genom en process som kallas interpolation. Med stränginterpolation kan du bädda in uttryck eller variabler i dina strängar med hjälp av ${expression} Platshållare. Det är här värdet av bokstavliga JavaScript-mallar blir verkligen uppenbart.

låt användarnamn = "okänd kvinna";
låta ålder = 21;
låt jobbet = "Webbutvecklare";
låta erfarenhet = 3;
låta html;
html = `<ul>
<li> Namn: ${userName} </li>
<li> Ålder: ${age} </li>
<li> Arbetstitel: ${job} </li>
<li> År av erfarenhet: ${experience} </li>
<li> Utvecklarnivå: ${experience < 5? "Junior till medel": "Senior"} </li>
</ul>`;
dokumentera.body.innerHTML = html;

Koden ovan producerar följande utdata i konsolen:

De fyra första argumenten för ${expression} platshållare är strängvariabler, men den femte är ett villkorligt uttryck. Uttrycket förlitar sig på värdet av en av variablerna (upplevelse), för att diktera vad den ska visa i webbläsaren.

Formatera element på din webbsida med JavaScript

Förutom dess funktionella koppling till webbsidautveckling, fungerar JavaScript med HTML för att påverka designen och layouten på en webbsida. Det kan manipulera texten som visas på en webbsida, som är fallet med mallbokstavar.

Det kan till och med konvertera HTML till bilder och visa dem på en webbsida.