문자열은 프로그래밍 세계에서 가장 기본적이고 중요한 데이터 유형 중 하나이며 JavaScript도 예외는 아닙니다. 다음 기사에서는 JavaScript 문자열을 조작하는 4가지 우아한 기술을 공유합니다.
JavaScript 문자열은 변경할 수 없으며 문자, 숫자, 유니코드로 구성될 수 있는 텍스트를 저장하는 데 편리합니다. JavaScript는 문자열을 다양한 방식으로 생성하고 조작할 수 있는 다양한 내장 함수를 제공합니다. JavaScript 문자열을 조작하는 4가지 우아한 기술을 살펴보겠습니다.
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("")
连接起来。
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")); // false
split()
함수로 분할된 문자열은 간단히
join("" )으로 분할할 수 있습니다. 코드> 연결합니다.2. JSON 형식 지정 및 구문 분석
JSON은 JavaScript 전용 데이터 유형이 아니며 프런트엔드 및 백엔드 데이터 상호 작용에 널리 사용됩니다.JSON.stringify()
함수는 객체를JSON
형식의 문자열로 변환하는 데 사용됩니다. 일반적으로 아래와 같이 개체를 매개변수로 전달합니다.
rrreee위 코드에서 볼 수 있듯이undefine
값은stringify
에서 필터링됩니다. , 그러나null
값은 그렇지 않습니다.JSON.stringify()
는 두 개의 선택적 매개변수를 허용할 수 있습니다. 두 번째 매개변수는 인쇄할 키 배열이나 키를 지우는 함수를 지정할 수 있는 대체자입니다. 다음 코드:
rrreee대규모 JSON의 경우 긴 배열을 전달하면 가독성과 효율성에 영향을 미칠 수 있습니다. 따라서 다음 코드와 같이 대체 함수를 설정하고 건너뛸 키에 대해undefine
을 반환할 수 있습니다. rrreeeJSON.stringify()
세 번째 매개변수 들여쓰기는JSON
형식을 지정하기 위해 (중첩 블록에 유용함) 지정되며, 숫자를 전달하여 들여쓰기 간격을 설정하거나 문자열을 전달하여 공백을 대체할 수도 있습니다. 다음 코드: rrreee출력 형식은 다음과 같습니다. rrreeeJSON
문자열을 받아 변환하는JSON.parse()
함수도 있습니다. JavaScript 개체에. 또한 개체 속성을 가로채고 값을 반환하기 전에 속성 값을 수정할 수 있는reviver
함수를 허용합니다. rrreee
3. 여러 줄 문자열 및 포함된 표현식JavaScript에서 문자열을 만드는 방법에는 세 가지가 있으며, 작은따옴표'', 큰따옴표""
또는 백틱(키보드 왼쪽 상단,1
의 왼쪽 키). rrreee 처음 두 가지 생성 방법은 기본적으로 동일하며 혼합 및 일치하여 따옴표 붙은 문자열을 연결하거나 추가할 수 있습니다(반대 구문 스타일 사용). 반면 백틱을 사용하면 문자열에 대한 멋지고 강력한 작업을 수행할 수 있습니다. 백틱은 템플릿 리터럴이라고도 합니다. 백틱은 여러 줄 문자열과 포함된 표현식을 만들 때 편리합니다. 다음은 JavaScript에서 문자열 보간을 사용하여 여러 줄의 문자열을 생성하는 방법에 대한 코드입니다. rrreee출력 결과도 다음과 같이 줄 바꿈됩니다. rrreee문자열 리터럴 외에도${ }
유효한 표현식은 무엇이든 허용됩니다. 이는 함수 호출이나 표현식 또는 중첩된 템플릿일 수도 있습니다. 태그가 있는 템플릿은 포함된 표현식이 인수인 함수를 사용하여 템플릿 리터럴을 구문 분석할 수 있는 고급 형식의 템플릿 리터럴입니다. 다음 코드: rrreee
4. 문자열 배열에 하위 문자열이 있는지 확인하세요.JavaScript 문자열에 하위 문자열이 있는지 확인하는 것은 ES6에서는 쉽습니다.include
함수를 사용하세요. 하지만 데이터에 문자열이 존재하는지 확인해야 합니다. 기본 배열의 항목 중 하나가 포함되어 있으면true
가 반환되고, 두 항목 모두 포함되지 않으면false가 반환되므로 아래와 같이 some
함수를includes
와 함께 사용해야 합니다. rrreeeSummaryJavaScript 문자열 작업은 다음과 같습니다. 위의 4가지 기술은 배우고 적용할 가치가 있습니다. 실제로 개발 중입니다. 더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !
위 내용은 알아두면 좋은 JS 문자열 조작을 위한 4가지 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!