Com formeu una cadena en JavaScript?

A JavaScript, una cadena és un grup de caràcters tancats per un parell de cometes simples o dobles. Hi ha moltes maneres de formatar cadenes en JavaScript.

Podeu utilitzar mètodes o operadors específics per combinar cadenes. Fins i tot podeu realitzar operacions específiques per decidir quina cadena apareix on i quan.

MAKEUSEO VÍDEO DEL DIA

Apreneu a formatar les vostres cadenes de JavaScript mitjançant mètodes de concatenació i literals de plantilla.

com trobar cançó al vídeo de youtube

Concatenació de cadenes

JavaScript us permet concatenar cadenes mitjançant diversos enfocaments. Un enfocament útil és el concat() mètode. Aquest mètode utilitza dues o més cadenes. Utilitza una única cadena de crida i pren una o més cadenes com a arguments.

const firstName = "John"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName.concat(" ", lastName); 
console.log(stringVal);

Aquí, concat uneix els arguments de cadena (un espai en blanc i cognom) a la cadena de trucada (firstName). Aleshores, el codi emmagatzema la nova cadena resultant en una variable (stringVal) i imprimeix el valor nou a la consola del navegador :

Una altra manera de concatenar una col·lecció de cadenes és utilitzant l'operador més. Aquest mètode us permet combinar variables de cadena i literals de cadena per crear cadenes noves.

const firstName = "John"; 
const middleName = "Mike"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName + " " + middleName + " " + lastName; 
console.log(stringVal);

El codi anterior imprimeix la sortida següent a la consola:

Un tercer enfocament per concatenar les vostres cadenes de JavaScript requereix l'ús d'un signe més i igual. Aquest mètode us permet afegir una cadena nova al final d'una existent.

const firstName = "John"; 
const lastName = "Doe"; 
  
let stringVal; 
  
stringVal = firstName; 
stringVal += " "; 
stringVal += lastName; 
  
console.log(stringVal);

Aquest codi afegeix un espai en blanc i el valor de la variable lastName a la variable firstName, produint la sortida següent:

Literals de plantilla

Els literals de plantilla són una característica d'ES6 que us permet formatar cadenes de JavaScript. Un literal de plantilla utilitza un parell de tecles enrere (`) per mostrar cadenes. Aquest mètode de format de cadenes us permet mostrar cadenes de diverses línies més netes en JavaScript.

no puc decidir on menjar

let html; 
  
html = `<ul> 
       <li> Name: John Doe </li> 
       <li> Age: 24 </li> 
       <li> Job: Software Engineer </li> 
       </ul>`; 
  
document.body.innerHTML = html;

El codi JavaScript anterior utilitza HTML per imprimir una llista de tres elements al navegador:

Per aconseguir la mateixa sortida sense literals de plantilla (o abans de literals de plantilla), haureu d'utilitzar cometes. Tanmateix, no podríeu estendre el codi a diverses línies com podeu fer amb literals de plantilla.

let html; 
  
html = "<ul><li>Name: John Doe</li><li>Age: 24</li><li>Job: Software Engineer</li></ul>"; 
  
document.body.innerHTML = html;

Interpolació de cadenes

Els literals de plantilla us permeten utilitzar expressions a les vostres cadenes de JavaScript mitjançant un procés anomenat interpolació. Amb la interpolació de cadenes, podeu incrustar expressions o variables a les vostres cadenes utilitzant el ${expression} posseïdor del lloc. Aquí és on el valor dels literals de la plantilla JavaScript es fa realment evident.

let userName = "Jane Doe"; 
let age = 21; 
let job = "Web Developer"; 
let experience = 3; 
  
let html; 
  
html = `<ul> 
       <li> Name: ${userName} </li> 
       <li> Age: ${age} </li> 
       <li> Job Title: ${job} </li> 
       <li> Years of Experience: ${experience} </li> 
       <li> Developer Level: ${experience < 5 ? "Junior to Intermediate" : "Senior"} </li> 
       </ul>`; 
  
document.body.innerHTML = html;

El codi anterior produeix la següent sortida a la consola:

Els quatre primers arguments de la ${expression} Els marcadors de posició són variables de cadena, però la cinquena és una expressió condicional. L'expressió es basa en el valor d'una de les variables (experiència), per dictar què hauria de mostrar al navegador.

Formatar elements a la vostra pàgina web amb JavaScript

A més de la seva associació funcional amb el desenvolupament de pàgines web, JavaScript treballa amb HTML per influir en el disseny i la disposició d'una pàgina web. Pot manipular el text que apareix en una pàgina web, com és el cas dels literals de plantilla.

Fins i tot pot convertir HTML en imatges i mostrar-les en una pàgina web.