>웹 프론트엔드 >JS 튜토리얼 >JavaScript의 문자열 조작에 대한 종합 가이드

JavaScript의 문자열 조작에 대한 종합 가이드

Barbara Streisand
Barbara Streisand원래의
2024-12-23 11:45:21742검색

Comprehensive Guide to String Manipulation in JavaScript

JavaScript의 문자열 조작

문자열 조작은 JavaScript에서 텍스트 작업의 핵심 측면입니다. JavaScript는 문자열을 처리하고 변환하기 위한 다양한 내장 메서드와 기술을 제공합니다.


1. 문자열 만들기

JavaScript의 문자열은 작은따옴표('), 큰따옴표(") 또는 백틱(템플릿 리터럴의 경우 `)을 사용하여 생성할 수 있습니다.

:

const single = 'Hello';
const double = "World";
const template = `Hello, ${double}!`; // Using template literals
console.log(template); // Output: Hello, World!

2. 일반적인 문자열 메소드

아. 문자열 길이 구하기

.length 속성은 문자열의 문자 수를 반환합니다.

const text = "JavaScript";
console.log(text.length); // Output: 10

베. 캐릭터 접근

대괄호 표기법이나 .charAt() 메서드를 사용하여 개별 문자에 액세스할 수 있습니다.

const str = "Hello";
console.log(str[0]); // Output: H
console.log(str.charAt(1)); // Output: e

ㄷ. 케이스 변경

  • .toUpperCase()는 문자열을 대문자로 변환합니다.
  • .toLowerCase()는 문자열을 소문자로 변환합니다.
const text = "JavaScript";
console.log(text.toUpperCase()); // Output: JAVASCRIPT
console.log(text.toLowerCase()); // Output: javascript

디. 하위 문자열 검색

  • .indexOf()는 하위 문자열의 첫 번째 인덱스를 반환하거나 찾을 수 없는 경우 -1을 반환합니다.
  • .lastIndexOf() 문자열 끝부터 검색합니다.
const text = "JavaScript is awesome!";
console.log(text.indexOf("is")); // Output: 11
console.log(text.lastIndexOf("a")); // Output: 3

E. 하위 문자열 확인

  • .includes()는 하위 문자열이 존재하는지 확인합니다(true 또는 false 반환).
  • .startsWith()는 문자열이 특정 하위 문자열로 시작하는지 확인합니다.
  • .endsWith()는 문자열이 특정 하위 문자열로 끝나는지 확인합니다.
const text = "Hello, world!";
console.log(text.includes("world")); // Output: true
console.log(text.startsWith("Hello")); // Output: true
console.log(text.endsWith("!")); // Output: true

에프. 하위 문자열 추출

  • .slice(start, end)는 문자열의 일부를 추출합니다.
  • .substring(start, end)는 .slice와 유사하게 작동하지만 음수 인덱스를 허용하지 않습니다.
  • .substr(start, length)는 지정된 길이의 하위 문자열을 추출합니다.
const text = "JavaScript";
console.log(text.slice(0, 4)); // Output: Java
console.log(text.substring(4, 10)); // Output: Script
console.log(text.substr(4, 6)); // Output: Script

지. 문자열 분리

.split(delimiter) 메소드는 문자열을 하위 문자열 배열로 분할합니다.

const single = 'Hello';
const double = "World";
const template = `Hello, ${double}!`; // Using template literals
console.log(template); // Output: Hello, World!

H. 하위 문자열 교체

  • .replace(search, replacement)는 첫 번째 항목을 바꿉니다.
  • .replaceAll(search, replacement)은 모든 항목을 대체합니다.
const text = "JavaScript";
console.log(text.length); // Output: 10

나. 공백 제거

  • .trim()은 문자열 양쪽 끝의 공백을 제거합니다.
  • .trimStart() 및 .trimEnd()는 시작이나 끝에서 공백을 제거합니다.
const str = "Hello";
console.log(str[0]); // Output: H
console.log(str.charAt(1)); // Output: e

3. 고급 문자열 조작

아. 문자열 뒤집기

문자열을 배열로 변환하고, 배열을 뒤집은 다음 다시 문자열로 결합하여 문자열을 뒤집을 수 있습니다.

const text = "JavaScript";
console.log(text.toUpperCase()); // Output: JAVASCRIPT
console.log(text.toLowerCase()); // Output: javascript

베. 문자열 반복

.repeat(count) 메소드는 문자열을 여러 번 반복합니다.

const text = "JavaScript is awesome!";
console.log(text.indexOf("is")); // Output: 11
console.log(text.lastIndexOf("a")); // Output: 3

ㄷ. 패딩 문자열

  • .padStart(targetLength, padString)는 문자열의 시작 부분을 채웁니다.
  • .padEnd(targetLength, padString)는 문자열의 끝을 채웁니다.
const text = "Hello, world!";
console.log(text.includes("world")); // Output: true
console.log(text.startsWith("Hello")); // Output: true
console.log(text.endsWith("!")); // Output: true

4. 템플릿 리터럴

템플릿 리터럴은 동적 문자열을 생성하는 더 읽기 쉽고 간결한 방법을 제공합니다.

const text = "JavaScript";
console.log(text.slice(0, 4)); // Output: Java
console.log(text.substring(4, 10)); // Output: Script
console.log(text.substr(4, 6)); // Output: Script

5. 요약

  • 문자열 조작은 JavaScript에서 텍스트 데이터를 처리하고 변환하는 데 필수적입니다.
  • JavaScript는 문자열 검색, 추출, 변환 및 서식 지정을 위한 다양한 방법을 제공합니다.
  • 템플릿 리터럴, 문자열 반전, 패딩과 같은 고급 기능을 통해 텍스트 기반 작업에 JavaScript가 강력해졌습니다.

이러한 기술을 익히면 JavaScript 애플리케이션에서 복잡한 텍스트 작업을 처리할 수 있는 능력을 갖추게 됩니다.

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.