Strings: texto como dado.

const titulo = "CSS em geral";
const curtidas = 87;
const autor = "Dev Aprendiz";

// ❌ concatenação com + — difícil de ler com múltiplos valores
const html1 = '<h2 class="card-titulo">' + titulo + '</h2><p>' + curtidas + ' curtidas por ' + autor + '</p>';

// ✅ template literal — muito mais legível
const html2 = `
  <h2 class="card-titulo">${titulo}</h2>
  <p>${curtidas} curtida${curtidas === 1 ? "" : "s"} por ${autor}</p>
`;

// expressões completas dentro de ${}
const mensagem = `Artigo tem ${curtidas > 100 ? "mais de 100" : curtidas} curtidas`;

// múltiplas linhas — a quebra de linha é literal
const bloco = `
  Linha um
  Linha dois
  Linha três
`;

function gerarSlug(titulo) {
  return titulo
    .toLowerCase()           // "Meu Primeiro Projeto Web" → "meu primeiro projeto web"
    .trim()                  // remove espaços nas bordas
    .replace(/\s+/g, "-")   // espaços → hífens (regex: um ou mais espaços)
    .replace(/[^a-z0-9-]/g, ""); // remove tudo que não é letra, número ou hífen
}

gerarSlug("Meu Primeiro Projeto Web");
// → "meu-primeiro-projeto-web"

gerarSlug("  CSS: Grid & Flexbox! ");
// → "css-grid--flexbox" (o ! foi removido, o & também)

// outros usos dos métodos
const email = "  Dev@Exemplo.com  ";
email.trim().toLowerCase(); // → "dev@exemplo.com"

const descricao = "Aprenda HTML, CSS e JavaScript";
descricao.includes("CSS");      // → true
descricao.startsWith("Aprenda"); // → true
descricao.split(", ");          // → ["Aprenda HTML", "CSS e JavaScript"]

// padStart — formatar número com zeros à esquerda
const numero = "3";
numero.padStart(3, "0"); // → "003"

function truncar(texto, maximo = 160) {
  if (texto.length <= maximo) return texto;

  // cortar no limite e adicionar elipsis
  return texto.slice(0, maximo).trimEnd() + "…";
}

const descricao = "Aprenda a usar CSS Grid para criar layouts de duas dimensões com controle preciso de linhas e colunas, sem media queries desnecessárias.";

truncar(descricao, 80);
// → "Aprenda a usar CSS Grid para criar layouts de duas dimensões com controle…"

// slice com índice negativo — pegar o final da string
const url = "https://artigo.dev/css/grid";
const slug = url.slice(url.lastIndexOf("/") + 1);
// → "grid"

const titulo = "HTML";

// acesso por índice
titulo[0]; // → "H"
titulo[3]; // → "L"

// for...of — itera caractere por caractere
for (const letra of titulo) {
  console.log(letra); // H, T, M, L
}

// converter para array de caracteres
const caracteres = Array.from(titulo);
// → ["H", "T", "M", "L"]

// ou com split("")
const chars = titulo.split("");
// → ["H", "T", "M", "L"]

// contar palavras em um texto
function contarPalavras(texto) {
  return texto.trim().split(/\s+/).length;
}

contarPalavras("Aprenda HTML CSS e JavaScript"); // → 5
contarPalavras("  múltiplos   espaços  ");       // → 2

const original = "css em geral";

// uppercase não modifica 'original' — retorna nova string
const maiusculo = original.toUpperCase();

console.log(original); // → "css em geral" (não mudou)
console.log(maiusculo); // → "CSS EM GERAL"