JS 튜토리얼

제이에스 홈 JS 소개 JS 어디로 JS 출력 JS 문 JS 구문 JS 코멘트 JS 변수 제이에스렛 JS 상수 JS 연산자 JS 산술 JS 할당 JS 데이터 유형 JS 함수 JS 객체 JS 이벤트 JS 문자열 JS 문자열 메서드 JS 문자열 검색 JS 문자열 템플릿 JS 번호 JS 숫자 메서드 JS 배열 JS 배열 메서드 JS 배열 정렬 JS 배열 반복 JS 배열 상수 JS 날짜 JS 날짜 형식 JS 날짜 가져오기 메서드 JS 날짜 설정 방법 JS 수학 JS 랜덤 JS 부울 JS 비교 JS 조건 JS 스위치 JS 루프 In에 대한 JS 루프 의 JS 루프 JS 루프 동안 JS 브레이크 JS 이터러블 JS 세트 JS 맵 JS 유형 JS 유형 변환 JS 비트와이즈 JS 정규 표현식 JS 오류 JS 범위 JS 호이스팅 JS 엄격 모드 JS 이 키워드 JS 화살표 함수 JS 클래스 JS JSON JS 디버깅 JS 스타일 가이드 JS 모범 사례 JS 실수 JS 성능 JS 예약어

JS 버전

JS 버전 JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE / 엣지 JS 연혁

JS 객체

객체 정의 개체 속성 개체 메서드 개체 표시 개체 접근자 객체 생성자 개체 프로토타입 객체 반복 가능 객체 세트 객체 맵 개체 참조

JS 함수

기능 정의 기능 매개변수 함수 호출 함수 호출 기능 적용 함수 클로저

JS 클래스

수업 소개 클래스 상속 클래스 정적

JS 비동기

JS 콜백 JS 비동기 JS 약속 JS 비동기/대기

JS HTML DOM

DOM 소개 DOM 메서드 DOM 문서 DOM 요소 DOM HTML DOM 양식 DOM CSS DOM 애니메이션 DOM 이벤트 DOM 이벤트 리스너 DOM 탐색 DOM 노드 DOM 컬렉션 DOM 노드 목록

JS 브라우저 BOM

JS 창 JS 화면 JS 위치 JS 연혁 JS 네비게이터 JS 팝업 경고 JS 타이밍 JS 쿠키

JS 웹 API

웹 API 소개 웹 양식 API 웹 기록 API 웹 스토리지 API 웹 작업자 API 웹 가져오기 API 웹 지리적 위치 API

JS 아약스

AJAX 소개 AJAX XMLHttp AJAX 요청 AJAX 응답 AJAX XML 파일 AJAX PHP AJAX ASP AJAX 데이터베이스 AJAX 애플리케이션 AJAX 예제

JS JSON

JSON 소개 JSON 구문 JSON 대 XML JSON 데이터 유형 JSON 구문 분석 JSON 문자열화 JSON 객체 JSON 배열 JSON 서버 JSON PHP JSON HTML JSON JSONP

JS 대 jQuery

jQuery 선택기 제이쿼리 HTML 제이쿼리 CSS 제이쿼리 DOM

JS 그래픽

JS 그래픽 JS 캔버스 JS 플로틀리 JS 차트.js JS 구글 차트 JS D3.js

JS 예제

JS 예제 JS HTML DOM JS HTML 입력 JS HTML 객체 JS HTML 이벤트 JS 브라우저 JS 편집기 JS 연습 JS 퀴즈 JS 인증서

JS 참조

자바스크립트 객체 HTML DOM 객체


JavaScript 문자열 메서드


문자열 메서드는 문자열 작업에 도움이 됩니다.


문자열 메서드 및 속성

"John Doe"와 같은 기본 값은 속성이나 메서드를 가질 수 없습니다(객체가 아니기 때문에).

그러나 JavaScript에서는 메서드와 속성을 실행할 때 JavaScript가 기본 값을 객체로 취급하기 때문에 메서드와 속성을 기본 값에도 사용할 수 있습니다.


자바스크립트 문자열 길이

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

예시

let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = txt.length;

문자열 부분 추출

문자열의 일부를 추출하는 방법에는 3가지가 있습니다.

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

자바스크립트 문자열 슬라이스()

slice()문자열의 일부를 추출하고 추출된 부분을 새 문자열로 반환합니다.

이 메서드는 시작 위치와 끝 위치(끝은 포함되지 않음)의 2가지 매개변수를 사용합니다.

이 예에서는 문자열의 일부를 위치 7에서 위치 12(13-1)로 잘라냅니다.

예시

let str = "Apple, Banana, Kiwi";
let part = str.slice(7, 13);

메모

JavaScript는 0부터 위치를 계산합니다.

첫 번째 위치는 0입니다.

두 번째 위치는 1입니다.

매개변수가 음수이면 위치는 문자열 끝에서 계산됩니다.

이 예에서는 위치 -12에서 위치 -6까지 문자열의 일부를 잘라냅니다.

예시

let str = "Apple, Banana, Kiwi";
let part = str.slice(-12, -6);

두 번째 매개변수를 생략하면 이 메서드는 나머지 문자열을 잘라냅니다.

예시

let part = str.slice(7);

또는 끝에서 계산:

예시

let part = str.slice(-12);


JavaScript 문자열 하위 문자열()

substring()와 비슷합니다 slice().

차이점은 substring()음수 인덱스를 허용할 수 없다는 것입니다.

예시

let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);

두 번째 매개변수를 생략하면 substring()문자열의 나머지 부분을 잘라냅니다.


자바스크립트 문자열 substr()

substr()와 비슷합니다 slice().

차이점은 두 번째 매개변수 가 추출된 부분 의 길이 를 지정한다는 것입니다.

예시

let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);

두 번째 매개변수를 생략하면 substr()문자열의 나머지 부분을 잘라냅니다.

예시

let str = "Apple, Banana, Kiwi";
let part = str.substr(7);

첫 번째 매개변수가 음수이면 위치는 문자열 끝에서 계산됩니다.

예시

let str = "Apple, Banana, Kiwi";
let part = str.substr(-4);

문자열 내용 바꾸기

replace()메서드는 지정된 값을 문자열의 다른 값으로 바꿉니다.

예시

let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

메모

메서드는 호출 된 replace()문자열을 변경하지 않습니다.

replace()메서드는 새 문자열을 반환합니다.

기본적으로 이 replace()메서드는 첫 번째 일치 항목만 대체합니다.

예시

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

기본적으로 replace()메서드는 대소문자를 구분합니다. MICROSOFT(대문자 포함) 쓰기는 작동하지 않습니다.

예시

let text = "Please visit Microsoft!";
let newText = text.replace("MICROSOFT", "W3Schools");

대소문자를 구분하지 않는 것을 바꾸려면 다음과 같이 플래그가 있는 정규식을 사용합니다(비구분) ./i

예시

let text = "Please visit Microsoft!";
let newText = text.replace(/MICROSOFT/i, "W3Schools");

메모

정규식은 따옴표 없이 작성됩니다.

모든 일치 항목을 바꾸려면 플래그 와 함께 정규식 을 사용합니다(전역 일치)./g

예시

let text = "Please visit Microsoft and Microsoft!";
let newText = text.replace(/Microsoft/g, "W3Schools");

메모

JavaScript 정규식 장에서 정규식에 대해 더 많이 배울 것 입니다.


대문자와 소문자로 변환

문자열은 다음을 사용하여 대문자로 변환됩니다 toUpperCase().

문자열은 다음을 사용하여 소문자로 변환됩니다 toLowerCase().


JavaScript 문자열 toUpperCase()

예시

let text1 = "Hello World!";
let text2 = text1.toUpperCase();

JavaScript 문자열 toLowerCase()

예시

let text1 = "Hello World!";       // String
let text2 = text1.toLowerCase();  // text2 is text1 converted to lower

자바스크립트 문자열 연결()

concat()두 개 이상의 문자열을 결합합니다.

예시

let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);

concat()메서드는 더하기 연산자 대신 사용할 수 있습니다. 이 두 줄은 동일한 작업을 수행합니다.

예시

text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");

메모

모든 문자열 메서드는 새 문자열을 반환합니다. 그들은 원래 문자열을 수정하지 않습니다.

공식적으로 다음과 같이 말했습니다.

문자열은 변경할 수 없습니다. 문자열은 변경할 수 없으며 교체만 가능합니다.


자바스크립트 문자열 트림()

trim()메서드는 문자열의 양쪽에서 공백을 제거합니다.

예시

let text1 = "      Hello World!      ";
let text2 = text1.trim();

자바스크립트 문자열 패딩

ECMAScript 2017에는 두 개의 String 메서드가 추가되었습니다 . 하나는 문자열의 시작 padStartpadEnd끝에서 패딩을 지원하기 위한 것입니다.


자바스크립트 문자열 padStart()

예시

let text = "5";
let padded = text.padStart(4,0);

브라우저 지원

padStart() ECMAScript 2017 기능입니다.

모든 최신 브라우저에서 지원됩니다.

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padStart() Internet Explorer에서는 지원되지 않습니다.


자바스크립트 문자열 padEnd()

예시

let text = "5";
let padded = text.padEnd(4,0);

브라우저 지원

padEnd() ECMAScript 2017 기능입니다.

모든 최신 브라우저에서 지원됩니다.

Chrome Edge Firefox Safari Opera
Yes Yes Yes Yes Yes

padEnd() Internet Explorer에서는 지원되지 않습니다.


문자열 문자 추출

문자열 문자를 추출하는 세 가지 방법이 있습니다.

  • charAt(position)
  • charCodeAt(position)
  • 속성 액세스 [ ]

자바스크립트 문자열 charAt()

charAt()메서드는 문자열의 지정된 인덱스(위치)에 있는 문자를 반환합니다.

예시

let text = "HELLO WORLD";
let char = text.charAt(0);

자바스크립트 문자열 charCodeAt()

charCodeAt()메서드는 문자열의 지정된 인덱스에 있는 문자의 유니코드를 반환합니다.

이 메서드는 UTF-16 코드(0에서 65535 사이의 정수)를 반환합니다.

예시

let text = "HELLO WORLD";
let char = text.charCodeAt(0);

재산 접근

ECMAScript 5(2009)는 문자열에 대한 속성 액세스 [ ]를 허용합니다.

예시

let text = "HELLO WORLD";
let char = text[0];

메모

속성 액세스는 약간 예측할 수 없습니다.

  • 문자열을 배열처럼 보이게 합니다(그러나 그렇지 않습니다).
  • If no character is found, [ ] returns undefined, while charAt() returns an empty string.
  • It is read only. str[0] = "A" gives no error (but does not work!)

Example

let text = "HELLO WORLD";
text[0] = "A";    // Gives no error, but does not work

Converting a String to an Array

If you want to work with a string as an array, you can convert it to an array.

JavaScript String split()

A string can be converted to an array with the split() method:

Example

text.split(",")    // Split on commas
text.split(" ")    // Split on spaces
text.split("|")    // Split on pipe

If the separator is omitted, the returned array will contain the whole string in index [0].

If the separator is "", the returned array will be an array of single characters:

Example

text.split("")

Complete String Reference

For a complete String reference, go to our:

Complete JavaScript String Reference.

The reference contains descriptions and examples of all string properties and methods.

Test Yourself With Exercises

Exercise:

Convert the text into an UPPERCASE text:

let txt = "Hello World!";
txt = txt.;