> 웹 프론트엔드 > JS 튜토리얼 > JavaScript의 마스터 문자열 데이터 유형에 대한 가이드

JavaScript의 마스터 문자열 데이터 유형에 대한 가이드

WBOY
풀어 주다: 2024-07-23 00:34:33
원래의
1200명이 탐색했습니다.

A Guide to Master String Data Type in JavaScript

JavaScript는 다재다능한 언어로서 문자열 작업에 필요한 다양한 기능을 제공합니다. 문자열은 모든 프로그래밍 언어에서 가장 기본적인 데이터 유형 중 하나이며 문자열을 효율적으로 조작하는 방법을 이해하면 코딩 기술을 크게 향상시킬 수 있습니다. 이 기사에서는 JavaScript 문자열 함수에 대해 자세히 알아보고 이를 익히는 데 도움이 되는 자세한 설명, 예 및 설명을 제공합니다.

JavaScript의 문자열 소개

JavaScript에서 문자열은 텍스트를 나타내는 데 사용되는 일련의 문자입니다. 문자열은 변경할 수 없습니다. 즉, 일단 생성되면 변경할 수 없습니다. 대신 문자열 작업으로 새 문자열이 생성됩니다.

let greeting = "Hello, World!";
console.log(greeting); // Output: Hello, World!
로그인 후 복사

문자열 만들기

문자열은 템플릿 리터럴에 작은따옴표, 큰따옴표 또는 역따옴표를 사용하여 생성할 수 있습니다.

let singleQuoteStr = 'Hello';
let doubleQuoteStr = "Hello";
let templateLiteralStr = `Hello, ${singleQuoteStr}`;
console.log(templateLiteralStr); // Output: Hello, Hello
로그인 후 복사

문자열 속성

  • length: 문자열의 길이를 반환합니다.
let str = "JavaScript";
console.log(str.length); // Output: 10
로그인 후 복사

문자열 메소드

1. charAt()

지정된 인덱스에 있는 문자를 반환합니다.

let str = "JavaScript";
console.log(str.charAt(0)); // Output: J
로그인 후 복사

2. charCodeAt()

지정된 인덱스에 있는 문자의 유니코드를 반환합니다.

let str = "JavaScript";
console.log(str.charCodeAt(0)); // Output: 74
로그인 후 복사

3. 연결()

두 개 이상의 문자열을 연결하고 새 문자열을 반환합니다.

let str1 = "Hello, ";
let str2 = "World!";
let result = str1.concat(str2);
console.log(result); // Output: Hello, World!
로그인 후 복사

4. 포함()

문자열에 지정된 값이 포함되어 있는지 확인하여 true 또는 false를 반환합니다.

let str = "JavaScript is awesome!";
console.log(str.includes("awesome")); // Output: true
로그인 후 복사

5. 끝으로()

문자열이 지정된 값으로 끝나는지 확인하여 true 또는 false를 반환합니다.

let str = "Hello, World!";
console.log(str.endsWith("World!")); // Output: true
로그인 후 복사

6. 인덱스오브()

지정된 값이 처음 나타나는 인덱스를 반환하거나, 값이 없으면 -1을 반환합니다.

let str = "JavaScript is awesome!";
console.log(str.indexOf("is")); // Output: 11
로그인 후 복사

7. 라스트인덱스오브()

지정된 값이 마지막으로 나타나는 인덱스를 반환하거나 값이 없으면 -1을 반환합니다.

let str = "JavaScript is awesome! JavaScript is fun!";
console.log(str.lastIndexOf("JavaScript")); // Output: 22
로그인 후 복사

8. 일치()

정규 표현식과 문자열을 일치시킬 때 일치 항목을 검색합니다.

let str = "JavaScript is awesome!";
let regex = /is/g;
console.log(str.match(regex)); // Output: [ 'is', 'is' ]
로그인 후 복사

9. 반복()

호출된 문자열의 지정된 복사본 수를 포함하는 새 문자열을 반환합니다.

let str = "Hello!";
console.log(str.repeat(3)); // Output: Hello!Hello!Hello!
로그인 후 복사

10. 교체()

지정된 값을 문자열의 다른 값으로 바꿉니다.

let str = "JavaScript is awesome!";
let newStr = str.replace("awesome", "fantastic");
console.log(newStr); // Output: JavaScript is fantastic!
로그인 후 복사

11. 검색()

문자열에서 지정된 값을 검색하고 일치 위치를 반환합니다.

let str = "JavaScript is awesome!";
console.log(str.search("awesome")); // Output: 15
로그인 후 복사

12.슬라이스()

문자열의 일부를 추출하여 새 문자열로 반환합니다.

let str = "JavaScript";
console.log(str.slice(0, 4)); // Output: Java
로그인 후 복사

13. 분할()

지정된 구분 기호를 기준으로 문자열을 하위 문자열 배열로 분할합니다.

let str = "Hello, World!";
let arr = str.split(", ");
console.log(arr); // Output: [ 'Hello', 'World!' ]
로그인 후 복사

14. 시작()

문자열이 지정된 값으로 시작하는지 확인하여 true 또는 false를 반환합니다.

let str = "Hello, World!";
console.log(str.startsWith("Hello")); // Output: true
로그인 후 복사

15. 부분문자열()

지정된 두 인덱스 사이의 문자열에서 문자를 추출합니다.

let str = "JavaScript";
console.log(str.substring(0, 4)); // Output: Java
로그인 후 복사

16. toLowerCase()

문자열을 소문자로 변환합니다.

let str = "JavaScript";
console.log(str.toLowerCase()); // Output: javascript
로그인 후 복사

17. 대문자()

문자열을 대문자로 변환합니다.

let str = "JavaScript";
console.log(str.toUpperCase()); // Output: JAVASCRIPT
로그인 후 복사

18. 트림()

문자열 양쪽 끝의 공백을 제거합니다.

let str = "   JavaScript   ";
console.log(str.trim()); // Output: JavaScript
로그인 후 복사

19. 트림시작()

문자열 시작 부분의 공백을 제거합니다.

let str = "   JavaScript";
console.log(str.trimStart()); // Output: JavaScript
로그인 후 복사

20. 트림엔드()

문자열 끝에서 공백을 제거합니다.

let str = "JavaScript   ";
console.log(str.trimEnd()); // Output: JavaScript
로그인 후 복사

21. 가치()

문자열 객체의 기본 값을 반환합니다.

let str = new String("JavaScript");
console.log(str.valueOf()); // Output: JavaScript
로그인 후 복사

템플릿 리터럴

템플릿 리터럴을 사용하면 표현식을 삽입할 수 있어 문자열 연결과 여러 줄 문자열을 더 쉽게 만들 수 있습니다.

let name = "John";
let greeting = `Hello, ${name}! How are you?`;
console.log(greeting); // Output: Hello, John! How are you?
로그인 후 복사

문자열.원시()

원시 템플릿 문자열에서 생성된 문자열을 반환하므로 작성된 원시 문자열에 액세스할 수 있습니다.

let str = String.raw`Hello\nWorld!`;
console.log(str); // Output: Hello\nWorld!
로그인 후 복사

실제 사례

예제 1: 문자열 반전

function reverseString(str) {
    return str.split('').reverse().join('');
}
console.log(reverseString("JavaScript")); // Output: tpircSavaJ
로그인 후 복사

예 2: 회문 확인

function isPalindrome(str) {
    let cleanedStr = str.replace(/[\W_]/g, '').toLowerCase();
    return cleanedStr === cleanedStr.split('').reverse().join('');
}
console.log(isPalindrome("A man, a plan, a canal, Panama")); // Output: true
로그인 후 복사

예 3: 각 단어의 첫 글자를 대문자로 표기

function capitalizeWords(str) {
    return str.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
}
console.log(capitalizeWords("hello world")); // Output: Hello World
로그인 후 복사

결론

JavaScript 문자열 기능을 익히는 것은 효율적인 텍스트 조작 및 데이터 처리에 매우 중요합니다. 연결 및 슬라이싱과 같은 기본 작업부터 정규식 일치 및 템플릿 리터럴과 같은 고급 기능에 이르기까지 JavaScript는 문자열 작업을 위한 풍부한 도구 세트를 제공합니다. 이러한 기능을 이해하고 활용하면 더 깔끔하고 효율적인 코드를 작성하고 다양한 프로그래밍 문제를 해결할 수 있습니다.

이 포괄적인 가이드는 JavaScript에서 가장 중요한 문자열 기능을 예시와 설명과 함께 다루었습니다. 이러한 기능을 연습하고 다양한 사용 사례를 실험하여 이해를 강화하고 코딩 능력을 향상시키세요.

위 내용은 JavaScript의 마스터 문자열 데이터 유형에 대한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿