알아두면 좋은 JS 문자열 조작을 위한 4가지 팁

문자열은 프로그래밍 세계에서 가장 기본적이고 중요한 데이터 유형 중 하나이며 JavaScript도 예외는 아닙니다. 다음 기사에서는 JavaScript 문자열을 조작하는 4가지 우아한 기술을 공유합니다.

JavaScript 문자열은 변경할 수 없으며 문자, 숫자, 유니코드로 구성될 수 있는 텍스트를 저장하는 데 편리합니다. JavaScript는 문자열을 다양한 방식으로 생성하고 조작할 수 있는 다양한 내장 함수를 제공합니다. JavaScript 문자열을 조작하는 4가지 우아한 기술을 살펴보겠습니다.

1. 문자열 분할

JavaScript의 split() 메서드는 지정된 구분 기호 문자열을 사용하여 String 개체를 하위 문자열 배열로 분할합니다. 지정된 분할 문자열을 기반으로 하는 각 분할의 위치입니다. 문자열을 문자 또는 하위 문자열 배열로 변환하는 두 가지 선택적 매개 변수(구분 기호 및 선택적 제한 개수)가 있습니다. 구분 기호를 설정하지 않으면 배열의 전체 문자열이 반환됩니다. 구분 기호는 단일 문자, 문자열 또는 정규 표현식일 수 있습니다. 다음은 정규 표현식을 사용하여 쉼표와 공백을 사용하여 문자열을 분할하는 코드입니다. split() 方法使用指定的分隔符字符串将一个 String 对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。 有两个可选参数（分隔符和可选限制计数）将字符串转换为字符或子字符串数组，不设置分隔符将返回数组中的完整字符串。分隔符可以采用单个字符、字符串，甚至正则表达式。下面是使用正则表达式将使用逗号和空格拆分字符串的代码：

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

通过 split() 函数拆分的字符串可以通过简单地通过join("") 连接起来。

2. JSON格式化和解析

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 }

3. 多行字符串和嵌入式表达式

在 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

4. 验证字符串数组中是否存在子字符串

查找 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")); // false

split() 함수로 분할된 문자열은 간단히 join("" )으로 분할할 수 있습니다. 코드> 연결합니다.

2. JSON 형식 지정 및 구문 분석

JSON은 JavaScript 전용 데이터 유형이 아니며 프런트엔드 및 백엔드 데이터 상호 작용에 널리 사용됩니다. JSON.stringify() 함수는 객체를 JSON 형식의 문자열로 변환하는 데 사용됩니다. 일반적으로 아래와 같이 개체를 매개변수로 전달합니다.

rrreee

위 코드에서 볼 수 있듯이 undefine 값은 stringify에서 필터링됩니다. , 그러나 null 값은 그렇지 않습니다. JSON.stringify()는 두 개의 선택적 매개변수를 허용할 수 있습니다. 두 번째 매개변수는 인쇄할 키 배열이나 키를 지우는 함수를 지정할 수 있는 대체자입니다. 다음 코드:

rrreee🎜대규모 JSON의 경우 긴 배열을 전달하면 가독성과 효율성에 영향을 미칠 수 있습니다. 따라서 다음 코드와 같이 대체 함수를 설정하고 건너뛸 키에 대해 undefine을 반환할 수 있습니다. 🎜rrreee🎜JSON.stringify() 세 번째 매개변수 들여쓰기는 JSON 형식을 지정하기 위해 (중첩 블록에 유용함) 지정되며, 숫자를 전달하여 들여쓰기 간격을 설정하거나 문자열을 전달하여 공백을 대체할 수도 있습니다. 다음 코드: 🎜rrreee🎜출력 형식은 다음과 같습니다. 🎜rrreee🎜JSON 문자열을 받아 변환하는 JSON.parse() 함수도 있습니다. JavaScript 개체에. 또한 개체 속성을 가로채고 값을 반환하기 전에 속성 값을 수정할 수 있는 reviver 함수를 허용합니다. 🎜rrreee

🎜3. 여러 줄 문자열 및 포함된 표현식🎜🎜🎜JavaScript에서 문자열을 만드는 방법에는 세 가지가 있으며, 작은따옴표 '', 큰따옴표 "" 또는 백틱(키보드 왼쪽 상단, 1의 왼쪽 키). 🎜rrreee🎜 처음 두 가지 생성 방법은 기본적으로 동일하며 혼합 및 일치하여 따옴표 붙은 문자열을 연결하거나 추가할 수 있습니다(반대 구문 스타일 사용). 반면 백틱을 사용하면 문자열에 대한 멋지고 강력한 작업을 수행할 수 있습니다. 🎜🎜백틱은 템플릿 리터럴이라고도 합니다. 백틱은 여러 줄 문자열과 포함된 표현식을 만들 때 편리합니다. 다음은 JavaScript에서 문자열 보간을 사용하여 여러 줄의 문자열을 생성하는 방법에 대한 코드입니다. 🎜rrreee🎜출력 결과도 다음과 같이 줄 바꿈됩니다. 🎜rrreee🎜문자열 리터럴 외에도 ${ } 유효한 표현식은 무엇이든 허용됩니다. 이는 함수 호출이나 표현식 또는 중첩된 템플릿일 수도 있습니다. 🎜🎜태그가 있는 템플릿은 포함된 표현식이 인수인 함수를 사용하여 템플릿 리터럴을 구문 분석할 수 있는 고급 형식의 템플릿 리터럴입니다. 다음 코드: 🎜rrreee

🎜4. 문자열 배열에 하위 문자열이 있는지 확인하세요.🎜🎜🎜JavaScript 문자열에 하위 문자열이 있는지 확인하는 것은 ES6에서는 쉽습니다. include 함수를 사용하세요. 🎜🎜하지만 데이터에 문자열이 존재하는지 확인해야 합니다. 기본 배열의 항목 중 하나가 포함되어 있으면 true가 반환되고, 두 항목 모두 포함되지 않으면 false가 반환되므로 아래와 같이 <code>some 함수를 includes와 함께 사용해야 합니다. 🎜rrreee🎜🎜Summary🎜🎜🎜JavaScript 문자열 작업은 다음과 같습니다. 위의 4가지 기술은 배우고 적용할 가치가 있습니다. 실제로 개발 중입니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 알아두면 좋은 JS 문자열 조작을 위한 4가지 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!