4 conseils pour manipuler les chaînes JS à connaître

String est l'un des types de données les plus fondamentaux et les plus importants dans le monde de la programmation, et JavaScript ne fait pas exception. L'article suivant partagera avec vous 4 techniques élégantes pour manipuler les chaînes JavaScript. Venez les récupérer !

Les chaînes JavaScript sont immuables et sont pratiques pour stocker du texte pouvant être composé de caractères, de chiffres et d'Unicode. JavaScript fournit de nombreuses fonctions intégrées qui permettent de créer et de manipuler des chaînes de différentes manières. Jetons un coup d'œil à ces 4 techniques élégantes pour manipuler les chaînes JavaScript.

1. Chaîne divisée

La méthode split() en JavaScript utilise la chaîne de délimiteur spécifiée pour diviser un objet String en un tableau de sous-chaînes, en utilisant une chaîne divisée spécifiée pour déterminer la position de chaque division. Il existe deux paramètres facultatifs (délimiteur et nombre limite facultatif) pour convertir la chaîne en un tableau de caractères ou de sous-chaînes. Ne pas définir le délimiteur renverra la chaîne complète dans le tableau. Les délimiteurs peuvent être des caractères simples, des chaînes ou même des expressions régulières. Voici le code qui divisera une chaîne à l'aide de virgules et d'espaces à l'aide d'expressions régulières :

const title = "4个，JavaScript 字符串技巧";
console.log(title.split(/[\s+，/]+/)); // [ '4个', 'JavaScript', '字符串技巧' ]
console.log(title.split(/[\s+，/]+/, 2)); // [ '4个', 'JavaScript' ]

Les chaînes divisées par la fonction split() peuvent être concaténées en passant simplement join("").

2. Formatage et analyse JSON

JSON n'est pas un type de données uniquement JavaScript et est largement utilisé pour l'interaction des données front-end et back-end. La fonction JSON.stringify() permet de convertir un objet en chaîne au format JSON. En règle générale, transmettez simplement un objet en paramètre, comme ceci :

const article = {
    title: "JavaScript 字符串技巧",
    view: 30000,
    comments: null,
    content: undefined,
};
const strArticle = JSON.stringify(article); 

console.log(strArticle); // {"title":"JavaScript 字符串技巧","view":30000,"comments":null}

Comme vous pouvez le voir dans le code ci-dessus, les valeurs stringify dans undefined sont filtrées, mais les valeurs null ne le sont pas.

JSON.stringify() Peut accepter deux paramètres facultatifs, le deuxième paramètre est un remplaçant dans lequel vous pouvez spécifier un tableau de touches à imprimer ou une fonction pour les effacer. Le code suivant :

console.log(JSON.stringify(article, ["title", "comments"])); // {"title":"JavaScript 字符串技巧","comments":null}
console.log(JSON.stringify(article, [])); // {}

Pour un JSON énorme, passer un long tableau peut affecter la lisibilité et l'efficacité. Vous pouvez donc mettre en place une fonction de remplacement et renvoyer undefined pour les touches que vous souhaitez sauter, comme dans le code suivant : Le troisième paramètre des formats

const result = JSON.stringify(article, (key, value) =>
    key === "title" ? undefined : value
);
console.log(result); // {"view":30000,"comments":null}

JSON.stringify() JSON en précisant le retrait (utile dans les blocs imbriqués), vous pouvez passer un nombre pour définir l'espacement des retraits, ou même transmettre une chaîne pour remplacer les espaces. Le code suivant :

console.log(JSON.stringify(article, ["title"], "\t"));

La sortie est formatée comme suit :

{
    "title": "JavaScript 字符串技巧"
}

Il existe également une fonction JSON.parse() qui accepte une chaîne JSON et la convertit en un objet JavaScript. Il accepte également une fonction reviver qui peut intercepter les propriétés de l'objet et modifier la valeur de la propriété avant de renvoyer la valeur.

const reviver = (key, value) => (key === "view" ? 0 : value);

var jsonString = JSON.stringify(article);
var jsonObj = JSON.parse(jsonString, reviver);

console.log(jsonObj); // { title: 'JavaScript 字符串技巧', view: 0, comments: null }

3. Chaînes multilignes et expressions intégrées

Il existe trois façons de créer des chaînes en JavaScript, vous pouvez utiliser des guillemets simples '', des guillemets doubles"" ou des backticks (en haut à gauche du clavier, à gauche du bouton 1).

const countries1 = "China";
const countries2 = "China";
const countries3 = `China`;

Les deux premières méthodes de création sont fondamentalement les mêmes et peuvent être mélangées et assorties pour concaténer ou ajouter des chaînes entre guillemets (en utilisant des styles de syntaxe opposés), tandis que les backticks permettent des opérations sophistiquées et puissantes sur les chaînes.

Les backticks sont également connus sous le nom de littéraux de modèle. Les backticks sont pratiques lors de la création de chaînes multilignes et d'expressions intégrées. Voici comment utiliser l'interpolation de chaîne en JavaScript pour créer une chaîne multiligne :

const year = "2021";
const month = 7;
const day = 2;
const detail = `今天是${year}年${month}月${day}日，
是个不错的日子！`;

console.log(detail);

Le résultat de sortie est également renvoyé à la ligne, comme suit :

今天是2021年7月2日，
是个不错的日子！

En plus des littéraux de chaîne, toute expression valide est autorisée dans ${}, elle peut être un appel de fonction ou une expression, ou même un modèle imbriqué.

Les modèles balisés sont une forme avancée de littéraux de modèle qui permettent d'analyser le littéral de modèle à l'aide d'une fonction dans laquelle les expressions intégrées sont des arguments. Le code suivant :

const title = "JavaScript 字符串技巧";
const view = 30000;

const detail = (text, titleExp, viewExp) => {
    const [string1, string2, string3] = [...text];
    return `${string1}${titleExp}${string2}${viewExp}${string3}`;
};

const intro = detail`本文的标题是《${title}》，当前阅读量是： ${view}`;

console.log(intro); // 文的标题是《JavaScript 字符串技巧》，当前阅读量是：30000

4. Vérifiez si une sous-chaîne existe dans un tableau de chaînes

Trouver si une sous-chaîne existe dans une chaîne JavaScript est une tâche facile dans ES6, il vous suffit d'utiliser la fonction includes.

Mais vous devez vérifier si la chaîne existe dans les données. Si l'un des éléments du tableau principal est inclus, true sera renvoyé. Si aucun des éléments n'est inclus, false sera donc renvoyé. some fonctionne avec includes, comme le montre le code suivant :

const arrayTitles = ["Javascript", "EScript", "Golang"];
const hasText = (array, findText) =>
    array.some((item) => item.includes(findText));

console.log(hasText(arrayTitles, "script")); // true
console.log(hasText(arrayTitles, "php")); // false

Résumé

Les opérations sur les chaînes JavaScript sont des opérations courantes dans les projets. Les quatre compétences ci-dessus méritent d'être apprises et appliquées au développement réel.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!