Quando trabalhamos com strings em JavaScript, um dos conceitos mais importantes é entender o que significa o
comprimento de uma string. A simples propriedade length pode parecer direta, mas, na prática, ela esconde
detalhes complexos sobre codificação, pontos de código, unidades de código e grapheme clusters. Este artigo
profundiza no assunto, ajuda você a entender como o javascript string length funciona na prática e
apresenta técnicas para contar caracteres de forma mais precisa em diferentes cenários.
O que é o comprimento de uma string e por que isso importa
O comprimento de uma string em JavaScript não é apenas o número de caracteres visíveis. Em termos técnicos, o valor
da propriedade length é o número de unidades de código (code units) na representação interna da string
em UTF-16. Isso significa que caracteres que exigem mais de uma unidade de código — como muitos caracteres
fora do Basic Multilingual Plane (BMP), incluindo muitos emojis — podem fazer a contagem parecer menos intuitiva do que
a contagem de “letras” que vemos ao olho nu.
JavaScript string length: a propriedade length e o que ela retorna
A propriedade length de uma string retorna um inteiro que indica quantas unidades de código ela
contém. Em termos simples, é a contagem de code units em UTF-16. Por exemplo:
console.log("Olá".length); // 3
console.log("😊".length); // 2
console.log("👩🏻🚀".length); // depende da forma de composição, pode ser 7 ou mais
Observação: o segundo exemplo demonstra que, embora o emoji “😊” pareça representar um único glyph,
ele pode exigir duas unidades de código em UTF-16. Já o terceiro exemplo mostra um emoji composto com várias
partes, o que pode resultar em um comprimento maior do que a contagem de caracteres visuais.
JavaScript string length versus contagem de caracteres visuais
Quando falamos do comprimento de uma string, é comum confundir “número de caracteres” com o valor de
javascript string length. Em muitos casos, as pessoas querem o número de caracteres que
aparecem para o usuário, ou o número de símbolos que aparecem quando o texto é exibido na tela. Como o
JavaScript string length mede code units, essa contagem pode divergir da contagem visual, especialmente
quando trabalhamos com caracteres especiais, diacríticos, ligaduras, emojis e sequências de modificação de grafemas.
Code units vs code points
Para entender melhor, é útil distinguir entre code units e code points. UTF-16 codifica pontos de código
em unidades chamadas code units. Caracteres simples do BMP ocupam uma única code unit. Caracteres fora do BMP
geralmente requerem duas code units (um surrogate pair). Assim, o comprimento de uma string pode ser maior que o
número de caracteres que você percebe como “letras”. Em termos simples: length mede unidades, não
necessariamente glyphs únicos visíveis.
Como medir o comprimento por código de ponto
Se o seu objetivo é contar o número de pontos de código (code points) na string, em vez de code units, há
várias abordagens úteis. A mais simples é transformar a string em um array de pontos de código por meio do spread
operator ou do construtor Array.from, que percorre a string por código de ponto em vez de por code units.
Usando o spread operator
const s = "👩🏻🚀"; // emoji composto
console.log([...s].length); // conta por código de ponto, geralmente 1 para esse emoji completo
Usando Array.from
const s = "👩🏻🚀";
console.log(Array.from(s).length); // também conta por código de ponto
Essas abordagens são úteis quando você precisa de uma contagem que represente pontos de código individuais, por
exemplo, ao iterar sobre caracteres que podem ter várias unidades de código. No entanto, vale lembrar que nem sempre
corresponde à contagem visual de glyphs, principalmente para caracteres que combinam grafemas com zeros de largura
(zwj e variações).
Grapheme clusters, emojis e zigue-zague de complexidade
Um grapheme cluster é a menor unidade de escrita que é percebida como um único caractere pelo usuário. Em muitos casos,
um grapheme cluster pode consistir em vários code points, especialmente com emojis que incluem ligaduras, modificadores de sexo,
variações de tonalidade e zwj (zero-width joiner). Por exemplo, a sequência de um emoji com modificadores de pele, ou a
ligadura entre caracteres, pode formar um único glyph, mesmo que seja composto por várias unidades de código.
Exemplos práticos
- O emoji “👍” pode ocupar 2 code units em UTF-16, mas é contado como 1 grapheme cluster para a maioria dos cenários.
- Sequências com ZWJ, como “👨🚀” (homem astronauta) ou “👩🏻🚀”, representam únicos glyphs, apesar de terem várias code units.
Para contar grapheme clusters, uma abordagem simples não basta apenas usar length, porque ele trabalha em code units. Ferramentas modernas, disponíveis em navegadores modernos, permitem segmentar a string em grafemas através de Intl.Segmenter com granularidade de Grapheme. Quando disponível, isso oferece a contagem mais próxima da percepção do usuário.
if (typeof Intl !== "undefined" && Intl.Segmenter) {
const s = "👨🏻🚀";
const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
const graphemes = Array.from(segmenter.segment(s), s => s.segment);
console.log(graphemes.length); // número de grapheme clusters
} else {
console.log("Intl.Segmenter não disponível neste ambiente.");
}
Práticas recomendadas para contagem de comprimento em diferentes cenários
Dependendo do objetivo, diferentes abordagens são mais adequadas:
Quando usar length (comprimento em code units)
Use string.length quando precisa de uma contagem rápida baseada na codificação UTF-16 interna e quando
o seu processamento não depende da percepção de graphemes ou de caracteres fora do BMP. É simples e eficiente para
operações de cortes, subStrings simples e validação rápida de entradas de usuários.
Quando usar contagem por código de ponto
Use spread operator ou Array.from para contar code points, especialmente quando trabalha com textos que podem conter
emojis, acentos compostos ou caracteres que exigem várias code units. Isso evita surpresas em strings com caracteres
complexos.
Quando usar grapheme segments para contagem visual
Se a contagem precisa refletir a percepção do usuário, por exemplo em interfaces de usuário que limitam o
número de caracteres visíveis, utilize Intl.Segmenter (quando disponível) para contar grapheme clusters. Combine
com uma polidez de fallback para ambientes que não suportem a API.
Casos especiais: diacríticos, combinações e textos multilíngues
Textos em idiomas que usam diacríticos combináveis, como vietnamita, havaiano ou línguas que empregam ligaduras, podem
apresentar situações onde a contagem de length diverge da contagem visual. Em alguns casos, o mesmo caractere pode ser
representado por várias combinações de código points. Este é um aspecto comum em aplicações que lidam com nomes, títulos
ou textos de redes sociais.
Combinações de diacríticos
Caracteres com marcas de acentuação numerosas podem exigir várias code points. Em cenários de contagem, a abordagem por
code points pode ajustar a precisão, especialmente se o objetivo for limitar a entrada de usuário com base em regras
de validação de comprimento.
Textos multilingues com escritas complexas
Quando se trabalha com scripts que possuem prosa em várias línguas, a percepção de “tamanho” pode variar dependendo do
fonte, do renderizador e do ambiente de exibição. A prática recomendada é separar a lógica de contagem da apresentação e, se
possível, usar grapheme-based counting para limitar entradas de usuário em campos de texto, mantendo uma experiência consistente.
Exemplos práticos: medidas de comprimento com código JavaScript
Abaixo estão alguns cenários comuns com exemplos de código para ilustrar diferentes formas de medir o comprimento de strings.
Exemplo básico: comprimento com length
// Comprimento simples com length
const s = "teste";
console.log(s.length); // 5
Exemplo com emoji e código de ponto
const s = "😊";
console.log(s.length); // 2 (duas code units)
console.log([...s].length); // 1 (número de code points)
Contagem de grapheme clusters com Intl.Segmenter
const s = "👨🏻🚀👩🏽💻";
if (typeof Intl !== "undefined" && Intl.Segmenter) {
const segmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" });
const graphemes = Array.from(segmenter.segment(s), sg => sg.segment);
console.log(graphemes.length); // número de grapheme clusters
} else {
console.log("Intl.Segmenter não disponível.");
}
Boas práticas para trabalhar com strings longas
Ao projetar aplicações que manipulam textos longos, considere as seguintes práticas:
- Escolha a forma adequada de contagem de comprimento de acordo com o objetivo (length, code points ou grapheme clusters).
- Ofereça fallback para ambientes que não suportam APIs modernas como Intl.Segmenter.
- Teste com casos de borda, incluindo strings com emojis, ligaduras, combinações e textos multilingues.
- Documente claramente o que significa “comprimento” na sua função ou método para evitar ambiguidades entre os desenvolvedores.
Desempenho e considerações de compatibilidade
Em termos de desempenho, usar string.length é o caminho mais rápido, pois requer apenas uma leitura de uma propriedade.
Quando a precisão é prioridade, técnicas baseadas em spread ou Array.from podem ter overheads perceptíveis em strings muito grandes,
mas oferecem precisão de code points. Quanto à compatibilidade, a API Intl.Segmenter ainda está disponível nos navegadores modernos e
em ambientes Node.js recentes; para suportar navegadores mais antigos, implemente um fallback simples que conte code units com
length ou utilize bibliotecas que realizem a segmentação de grapheme com compatibilidade ampla.
Perguntas frequentes sobre javascript string length
Qual é a diferença entre length e o número de grapheme clusters?
Length mede unidades de código UTF-16. Grapheme clusters representam a percepção do usuário como um único glyph. Em strings com
emojis complexos ou ligaduras, o número de grapheme clusters pode ser menor que o length.
Como contar code points em vez de code units?
Use o spread operator ([...string]) ou Array.from(string) para dividir a string em code points e contar
os itens resultantes. Isso evita surpresas com caracteres que ocupam várias code units.
Existe uma forma simples de contar grapheme clusters?
Se o ambiente oferecer Intl.Segmenter com granularidade “grapheme”, é possível obter uma contagem baseada na visão do usuário.
Caso contrário, utilize bibliotecas de terceiros que implementem contagem de grapheme clusters com melhor precisão do que apenas length.
Em termos de desempenho, o que é melhor?
Para a maioria das situações simples, usar length é o mais rápido. Quando se trabalha com grafemas complexos, o custo da
segmentação pode ser justificado pela precisão. Sempre meça o impacto em cenários reais.
Conclusão: dominando o javascript string length para textos modernos
Entender o verdadeiro significado do comprimento de strings em JavaScript é essencial para criar aplicações robustas e
amigáveis ao usuário. A simples propriedade length é útil, mas pode enganar quando lidamos com unicode
complexo, emojis, diacríticos e grapheme clusters. Ao adotar abordagens baseadas em code points ou grapheme segments, você
consegue resultados que refletem a experiência do usuário final e evita surpresas em interfaces de texto, validação de entradas
e limites de campos de caracteres.
Resumo prático para developers
- Para contagem rápida e interna, use
string.length. - Para contar código de ponto, utilize
[...string].lengthouArray.from(string).length. - Para contagem de grapheme clusters, utilize Intl.Segmenter quando disponível, com fallback para outras técnicas.
- Teste com strings contendo emojis, ligaduras e caracteres combinados para garantir que o comportamento atende às expectativas.
Dominar o tema de comprimento de strings é um diferencial para qualquer desenvolvedor que trabalha com entradas de usuário, validação
de formulários, processamento de textos internacionais e interfaces de usuário que exigem consistência visual. Com as abordagens
apresentadas aqui, você fica preparado para lidar com a variedade de cenários de texto que surgem no desenvolvimento moderno.