String ist einer der grundlegendsten und wichtigsten Datentypen in der Programmierwelt, und JavaScript bildet da keine Ausnahme. Der folgende Artikel stellt Ihnen 4 elegante Techniken zum Bearbeiten von JavaScript-Strings vor. Kommen Sie und sammeln Sie sie!
JavaScript-Strings sind unveränderlich und eignen sich zum Speichern von Text, der aus Zeichen, Zahlen und Unicode bestehen kann. JavaScript bietet viele integrierte Funktionen, mit denen Zeichenfolgen auf unterschiedliche Weise erstellt und bearbeitet werden können. Werfen wir einen Blick auf diese 4 eleganten Techniken zur Manipulation von JavaScript-Strings.
Die Methode split() in JavaScript verwendet die angegebene Trennzeichenfolge, um ein String-Objekt in ein Array von Teilzeichenfolgen aufzuteilen Position jeder Teilung basierend auf einer angegebenen Teilungszeichenfolge. Es gibt zwei optionale Parameter (Trennzeichen und optionaler Grenzwert für die Anzahl), um die Zeichenfolge in ein Array von Zeichen oder Teilzeichenfolgen umzuwandeln. Wenn Sie das Trennzeichen nicht festlegen, wird die vollständige Zeichenfolge im Array zurückgegeben. Trennzeichen können einzelne Zeichen, Zeichenfolgen oder sogar reguläre Ausdrücke sein. Hier ist der Code, der eine Zeichenfolge mithilfe von Kommas und Leerzeichen mithilfe regulärer Ausdrücke aufteilt: split() 方法使用指定的分隔符字符串将一个 String 对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。 有两个可选参数（分隔符和可选限制计数）将字符串转换为字符或子字符串数组，不设置分隔符将返回数组中的完整字符串。分隔符可以采用单个字符、字符串，甚至正则表达式。下面是使用正则表达式将使用逗号和空格拆分字符串的代码：
const title = "4个，JavaScript 字符串技巧"; console.log(title.split(/[\s+，/]+/)); // [ '4个', 'JavaScript', '字符串技巧' ] console.log(title.split(/[\s+，/]+/, 2)); // [ '4个', 'JavaScript' ]
通过 split() 函数拆分的字符串可以通过简单地通过join("") 连接起来。
JSON 不是仅限 JavaScript 的数据类型，并且广泛用于前后端数据交互。JSON.stringify() 函数用于将对象转换为 JSON 格式的字符串。通常，只需将对象作为参数即可，如下所示：
const article = {
title: "JavaScript 字符串技巧",
view: 30000,
comments: null,
content: undefined,
};
const strArticle = JSON.stringify(article);
console.log(strArticle); // {"title":"JavaScript 字符串技巧","view":30000,"comments":null}从上面的代码可以看到，在 stringify 中会过滤掉 undefined 的值，但 null 值不会。
JSON.stringify() 可以接受两个可选参数，第二个参数是一个替换器，可以在其中指定要打印的键的数组或清除它们的函数。如下代码：
console.log(JSON.stringify(article, ["title", "comments"])); // {"title":"JavaScript 字符串技巧","comments":null}
console.log(JSON.stringify(article, [])); // {}对于一个巨大的 JSON，传递一个长数组可能影响可读性及效率。因此，可以设置替换函数并为要跳过的键返回 undefined ，如下代码：
const result = JSON.stringify(article, (key, value) =>
key === "title" ? undefined : value
);
console.log(result); // {"view":30000,"comments":null}JSON.stringify() 的第三个参数通过指定缩进（在嵌套块中很有用）来格式化 JSON，可以传递一个数字来设置缩进间距，甚至可以传递一个字符串来替换空格。如下代码：
console.log(JSON.stringify(article, ["title"], "\t"));
输出的格式如下：
{
"title": "JavaScript 字符串技巧"
}还有一个 JSON.parse() 函数，它接受一个 JSON 字符串并将其转换为一个 JavaScript 对象。它还接受一个 reviver 函数，可以在返回值之前拦截对象属性并修改属性值。
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 }在 JavaScript 中有三种创建字符串的方式，可以使用单引号 '' 、双引号 "" 或反引号（键盘的左上方， 1 的左边按键）。
const countries1 = "China"; const countries2 = "China"; const countries3 = `China`;
前两种创建方式基本相同，并且可以混合和匹配以连接或添加带引号的字符串（通过使用相反的语法风格），而反引号可以对字符串进行花哨而强大的操作。
反引号也称为模板字面量，反引号在创建多行字符串和嵌入表达式时很方便。下面是如何在 JavaScript 中使用字符串插值创建多行字符串的代码：
const year = "2021";
const month = 7;
const day = 2;
const detail = `今天是${year}年${month}月${day}日，
是个不错的日子！`;
console.log(detail);输出的结果也换行了，如下：
今天是2021年7月2日， 是个不错的日子！
除了字符串字面量，在 ${} 中允许任何有效的表达式，它可以是一个函数调用或表达式，甚至是一个嵌套模板。
标记模板是模板字面量的一种高级形式，它允许使用一个函数来解析模板字面量，其中内嵌的表达式是参数。如下代码：
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查找 JavaScript 字符串中是否存在子字符串时间容易的事情，在 ES6 中，只需要使用 includes 函数。
但需要验证字符串是否存于数据中，主要数组中其中一项包含就返回 true ，如果都不包含返回 false，因此需要使用 some 函数与includes
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")); // falsesplit() geteilte Zeichenfolgen können einfach mit join("" ) geteilt werden. Code> zum Verbinden. 2. JSON-Formatierung und -Analyse
JSON ist kein reiner JavaScript-Datentyp und wird häufig für Front-End- und Back-End-Dateninteraktionen verwendet. Die Funktion JSON.stringify() wird verwendet, um ein Objekt in einen String im JSON-Format zu konvertieren. Normalerweise übergeben Sie das Objekt einfach als Parameter, wie unten gezeigt:
rrreeeWie Sie dem obigen Code entnehmen können, wird der Wert von undefiniert in stringify herausgefiltert , null-Werte jedoch nicht. JSON.stringify() kann zwei optionale Parameter akzeptieren. Der zweite Parameter ist ein Ersatz, in dem Sie ein Array von zu druckenden Schlüsseln oder eine Funktion zum Löschen dieser Schlüssel angeben können. Der folgende Code:
rrreee🎜Bei einem großen JSON kann die Übergabe eines langen Arrays die Lesbarkeit und Effizienz beeinträchtigen. Daher können Sie die Ersetzungsfunktion einrichten und undefiniert für die zu überspringenden Schlüssel zurückgeben, wie im folgenden Code: 🎜rrreee🎜JSON.stringify() Der dritte Parameter Der Einzug wird durch angegeben (nützlich in verschachtelten Blöcken), um JSON zu formatieren. Sie können eine Zahl übergeben, um den Einzugsabstand festzulegen, oder sogar eine Zeichenfolge, um Leerzeichen zu ersetzen. Der folgende Code: 🎜rrreee🎜Das Ausgabeformat ist wie folgt: 🎜rrreee🎜Es gibt auch eine JSON.parse()-Funktion, die einen JSON-String akzeptiert und ihn konvertiert zu einem JavaScript-Objekt. Es akzeptiert auch eine reviver-Funktion, die Objekteigenschaften abfangen und den Eigenschaftswert ändern kann, bevor der Wert zurückgegeben wird. 🎜rrreee🎜3. Mehrzeilige Zeichenfolgen und eingebettete Ausdrücke🎜🎜🎜Es gibt drei Möglichkeiten, Zeichenfolgen in JavaScript zu erstellen: Sie können einfache Anführungszeichen '', doppelte Anführungszeichen <code>" oder Backtick (oben links auf der Tastatur, linke Taste von 1). 🎜rrreee🎜Die ersten beiden Erstellungsmethoden sind grundsätzlich gleich und können gemischt und angepasst werden, um Zeichenfolgen in Anführungszeichen zu verketten oder hinzuzufügen (durch Verwendung entgegengesetzter Syntaxstile), während Backticks ausgefallene und leistungsstarke Operationen an Zeichenfolgen ermöglichen. 🎜🎜Backticks werden auch als Vorlagenliterale bezeichnet und eignen sich zum Erstellen mehrzeiliger Zeichenfolgen und eingebetteter Ausdrücke. Hier ist der Code für die Verwendung der String-Interpolation zum Erstellen eines mehrzeiligen Strings in JavaScript: 🎜rrreee🎜Das Ausgabeergebnis wird ebenfalls zeilenumgebrochen, wie folgt: 🎜rrreee🎜Zusätzlich zu String-Literalen in ${ Jeder gültige Ausdruck ist zulässig, es kann ein Funktionsaufruf oder Ausdruck oder sogar eine verschachtelte Vorlage sein. 🎜🎜Tagged-Vorlagen sind eine erweiterte Form von Vorlagenliteralen, die es ermöglichen, das Vorlagenliteral mithilfe einer Funktion zu analysieren, bei der eingebettete Ausdrücke Argumente sind. Der folgende Code: 🎜rrreee🎜4. Überprüfen Sie, ob ein Teilstring in einem String-Array vorhanden ist. In ES6 ist es einfach herauszufinden, ob ein Teilstring in einem JavaScript-String vorhanden ist Verwenden Sie die Funktion includes. 🎜🎜Aber Sie müssen überprüfen, ob die Zeichenfolge in den Daten vorhanden ist. Wenn eines der Elemente im Hauptarray enthalten ist, wird true zurückgegeben. Wenn keines der Elemente enthalten ist, wird false wird zurückgegeben, daher müssen Sie <code>einige-Funktion zusammen mit includes verwenden, wie unten gezeigt: 🎜rrreee🎜🎜Zusammenfassung🎜🎜🎜JavaScript-String-Operationen sind Allgemeine Vorgänge in Projekten sind es wert, erlernt und angewendet zu werden. Derzeit in der Entwicklung. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜
Das obige ist der detaillierte Inhalt von4 wissenswerte Tipps zur Manipulation von JS-Strings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
