Adicionar caractere a string em JavaScript

Strings em JavaScript são imutáveis, portanto não é possível alterar um caractere dentro de uma string existente. Para adicionar texto, combine a string original com o novo texto e use a string resultante, seja em uma nova variável ou atribuindo-a novamente à variável original. Use + ou um literal de modelo para adições simples, concat() para unir strings ou o fatiamento de strings ou um array para inserir texto em uma posição específica.

Adicionar caracteres ao início ou ao fim de uma string

Coloque o novo texto antes da string existente para adicioná-lo ao início, ou depois dela para adicioná-lo ao fim. Por exemplo, "H" + "ello" produz "Hello", enquanto "Hello" + "!" produz "Hello!". O operador + é avaliado da esquerda para a direita, então a ordem dos operandos determina onde o texto aparece.

Execute este exemplo:

O código e os rótulos ou saídas exibidos nesta seção permanecem em inglês.

const existingString = "ello";
const charToAdd = "H";
const newString = charToAdd + existingString;
console.log(newString);

Hello

Para acrescentar texto, inverta a ordem dos operandos: existingString + charToAdd. Se quiser que a variável passe a referenciar o resultado, atribua-o novamente: existingString = existingString + charToAdd exige que existingString seja declarada com let, e não com const.

Usar o operador + e literais de modelo

O operador + funciona bem para unir poucos valores. Literais de modelo oferecem outra forma legível, especialmente quando uma string inclui várias variáveis ou expressões. Escreva o literal de modelo entre crases e coloque cada valor dentro de ${}. Por exemplo, `${firstName} ${lastName}` combina duas variáveis com um espaço entre elas. Para adicionar texto ao início ou ao fim, coloque a expressão correspondente na posição adequada dentro do literal de modelo.

As duas abordagens criam uma nova string; nenhuma altera as strings de origem. Escolha a que torna a ordem pretendida mais fácil de entender. Para usar um separador fixo entre vários valores, um literal de modelo pode deixar esse separador visível diretamente no resultado.

Usar concat() para unir strings

O método concat() retorna uma nova string com o valor que o recebe, seguido de cada argumento fornecido. O valor que recebe o método define a primeira parte do resultado: "Hello".concat("!") acrescenta um ponto de exclamação, enquanto "H".concat("ello") adiciona texto ao início de "ello", usando "H" como valor que recebe o método. O método não altera nenhuma das strings. Consulte a referência de concat() do JavaScript para ver os detalhes da API. A referência está em inglês, pois não há um destino localizado disponível.

Ao adicionar valores de um array, comece com a string e acrescente cada valor na ordem. Por exemplo, um loop que executa result = result.concat(character) para cada item de characters monta uma única string de resultado. Inicialize result com o texto inicial antes do loop. Para muitos trechos de texto, pode ser mais claro acumulá-los em um array e chamar join("") uma única vez do que montar uma string repetidamente.

Inserir caracteres em uma posição específica

Para inserir texto no índice position, una o trecho anterior a esse índice, o texto inserido e o trecho que começa nesse índice. Com slice(), a expressão é original.slice(0, position) + inserted + original.slice(position). A primeira chamada obtém os caracteres até, mas sem incluir, o índice; a segunda obtém o restante. Os índices de strings em JavaScript contam unidades de código UTF-16, portanto podem não corresponder aos caracteres percebidos pelas pessoas em emojis ou em alguns outros textos Unicode.

substring() permite expressar o mesmo padrão: original.substring(0, position) + inserted + original.substring(position). Para índices não negativos dentro da string, ele obtém o trecho entre os dois argumentos; com um argumento, obtém o restante da string. slice() também aceita índices negativos, enquanto substring() trata argumentos negativos como zero e inverte os argumentos quando o primeiro é maior que o segundo. Escolha conforme o comportamento de índice necessário no seu código.

Montar uma string a partir de um array

Quando for mais fácil descrever uma inserção como uma edição de array, divida a string em partes, use splice() para inserir um item e depois una o array novamente em uma string. Por exemplo, const parts = original.split("") cria um array de unidades de código UTF-16; parts.splice(position, 0, inserted) insere um item sem remover outro, e parts.join("") cria a string resultante. A posição é um índice de array baseado em zero: 0 insere antes do primeiro item e parts.length acrescenta o item depois do último.

Essa abordagem é útil quando você já precisa editar uma coleção de caracteres ou executar várias operações de array. Para textos que possam conter caracteres fora do Plano Multilíngue Básico, Array.from(original) percorre pontos de código Unicode em vez de unidades de código UTF-16. Nem split("") nem Array.from() agrupam marcas combinantes em grafemas percebidos como um único caractere; use uma abordagem compatível com grafemas quando a posição precisar corresponder ao que uma pessoa vê como um caractere.