[JavaScript] 자바스크립트에서 문자열 다루기

2022. 5. 14. 06:17Program/JavaScript

025_자바스크립트에서 문자열 다루기

[적용]

  • 문자열 길이를 확인하고 싶을 때
  • 문자열을 검색하고 싶을 때
  • 문자열을 추출하고 싶을 때
  • 문자열을 변환하고 싶을 때
  • 문자열을 나누고 싶을 때
  • 문자열을 겹합하고 싶을 때

[내용]

문자열은 자바스크립트의 기본 데이터 타입 중 하나.

'(작은따옴표), "(큰따옴표), `(백틱)으로 문자열을 감싸며, 타입은 String이다.

const a = 'JavaScript';  // 문자열 'JavaScript'
const b = "노는아빠";  // 문자열 '노는아빠'
const c = `웹디자인`;  // 문자열 '웹디자인'

문자열은 다음과 같은 작업등이 가능하다.

속성 내용 예시
문자열.length 문자열 길이를 확인하기 문자열 'JavaScript'의 길이를 구한다
대상문자열.indexOf(검색문자열) 문자열 검색하기 문자열 '노는아빠'에서 '아빠'가 포함된 문자열을 검색한다
문자열.charAt([인덱스]) 문자열 추출하기 문자열 '노는아빠'에서 앞의 세 글자를 추출한다
대상문자열.replace(문자열1,문자열2) 문자열 변환하기 문자열 '노는아빠'에서 '노는'을 '바쁜'으로 변환한다
문자열.split([기준문자],[최대분할수]) 문자열 나누기 URL의 해시로부터 파라미터 값을 확인한다
문자열1 + 문자열2 + 문자열3 문자열 결합하기 문자열 'Java'와 'Script'를 결합한다

 

문자열 내부에서 특수 문자를 사용하고 싶은 경우에는 다음 표기법을 사용한다.

표기 의미
\` 작은따옴표(Single Quotation Mark)
\" 큰따옴표(Double Quotation Mark)
\` 백틱(Grave Accent)
\\ 역슬래시(Back Slash)
\n 줄바꿈
\r 되돌리기

자세한 내용은 각 상황별 페이지에서 설명 합니다.


[JavaScript] 자바스크립트에서 문자열의 길이(문자의 수)를 확인하고 싶을때 length()

 

[JavaScript] 자바스크립트 문자열의 길이 확인하기

026_자바스크립트 문자열의 길이 확인하기 [적용] 입력폼에서 문자열의 길이를 확인하고 싶을 때 [문법] 속성 의미 타입 문자열.length 문자열의 길이 (문자의 수) 숫자 Array.from(문자열).length 문자열

stonefree.tistory.com


[JavaScript] 자바스크립트 문자열의 공백 처리하기 trim()

 

[JavaScript] 자바스크립트 문자열의 공백 처리하기 trim()

027_자바스크립트 문자열의 공백 처리하기 [적용] 문자열 양단의 공백을 제거하고 싶을 때 [내용] 문자열 양 끝의 공백을 제거하는 것을 '트리밍(Trimming)' 이라고 하며, trim()은 양단의 공백을 제거

stonefree.tistory.com


[JavaScript] 자바스크립트에서 문자열 검색하기 (인덱스 검색)

 

[JavaScript] 자바스크립트에서 문자열(인덱스) 검색하기

const targetString = 'JavaScript를 배우자'; document.querySelector('.result1').innerHTML = targetString.indexOf('JavaScript'); document.querySelector('.result1').innerHTML = targetString.indexOf('배..

stonefree.tistory.com


[JavaScript] 자바스크립트에서 문자열 검색하기 (부분 검색)

 

[JavaScript] 자바스크립트에서 문자열 검색하기 (부분 검색)

029_자바스크립트에서 문자열 검색하기 (부분 검색) [적용] 지정 문자열의 포함 여부를 확인하고 싶을 떄 입력폼의 부적절한 문자를 체크하고 싶을 떄 [문법] 메소드 의미 반환 대상문자열.includes(

stonefree.tistory.com


[JavaScript] 자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기)

 

[JavaScript] 자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기)

030_자바스크립트 문자열에서 문자 다루기 (문자열에서 문자 추출하기) [적용] 지정한 위치의 문자를 추출하고 싶을 때 [문법] 메소드 의미 반환 문자열.charAt([인덱스]*) 지정한 인덱스의 문자를

stonefree.tistory.com


[JavaScript] 자바스크립트 문자열 다루기 (위치 지정하여 선택하기)

 

[JavaScript] 자바스크립트 문자열 다루기 (위치 지정하여 선택하기)

031_자바스크립트 문자열 다루기 (위치 지정하여 선택하기) [적용] 지정 범위 내의 문자열을 추출하여 사용하고 싶을 때 지정 위치 이후의 문자열을 추출하여 사용하고 싶을 때 [문법] 메소드 의

stonefree.tistory.com


[JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기)

 

[JavaScript] 자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기)

032_자바스크립트 문자열 다루기 (글자 수 지정하여 선택하기) [적용] 위치와 글자 수를 지정한 문자열을 추출하고 싶을 때 [문법] 메소드 의미 반환 문자열.substr(시작인덱스, [글자수*]) 지정 범위

stonefree.tistory.com

[JavaScript] 자바스크립트 지정 문자열 변환하기

 

[JavaScript] 자바스크립트 지정 문자열 변환하기

033_자바스크립트 지정 문자열 변환하기 [적용] 문자열을 다른 문자열로 바꾸고 싶을 때 문자열 내 불필요한 줄바꿈 코드를 로 바꾸고 싶을 때 빈칸을 제거하고 싶을 때 [문법] 메소드 의미 반환

stonefree.tistory.com


[JavaScript] 자바스크립트 문자열 나누기

 

[JavaScript] 자바스크립트 문자열 나누기

034_자바스크립트 문자열 나누기 [적용] URL의 해시(Hash) 데이터르르 가져올 때 공백을 기준으로 문자열을 나누고 싶을 때 [문법] 메소드 의미 반환 문자열.split([기준문자*], [최대분할수*])  지정

stonefree.tistory.com


[JavaScript] 자바스크립트 문자열 합치기

 

[JavaScript] 자바스크립트 문자열 합치기

035_자바스크립트 문자열 합치기 [적용] 따로 입력받은 성과 이름을 결합하여 문자열을 만들고 싶을 때 폴더명과 파일명을 결합하여 파일 주소를 문자열로 만들고 싶을 때 [문법] 구문 의미 문자

stonefree.tistory.com


[JavaScript] 자바스크립트 문자열의 대소문자 변환하기

 

[JavaScript] 자바스크립트 문자열의 대소문자 변환하기

036_자바스크립트 문자열의 대소문자 변환하기 [적용] 소무자를 대문자로 변환하고 싶을 때 서버에서 반환된 대문자 데이터를 소문자로 변환하고 싶을 때 [문법] 메소드 의미 반환 문자열.toLowerCa

stonefree.tistory.com


[JavaScript] 자바스크립트 문자열과 식 함께 다루기

 

[JavsScript] 자바스크립트 문자열과 식 함께 다루기

037_자바스크립트 문자열과 식 함께 다루기 [적용] 여러 문자열을 다루고 싶을 때 문자열 내 변수를 다루고 싶을 때 [문법] 구문 의미 문자열 + 문자열 + ... 문자열 결합 `${문자열1}${문자열2}${문자

stonefree.tistory.com


[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기)

 

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식 사용하기)

038_자바스크립트 문자열 다루기 (정규 표현식 사용하기) [적용] 조건과 일치하는 문자열을 검색하고 싶을 때 많은 문자열을 패턴에 따라 일괄적으로 변환하고 싶을 때 [내용] 정규 표현을 사용하

stonefree.tistory.com


[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기)

 

[JavaScript] 자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기)

039_자바스크립트 문자열 다루기 (정규 표현식으로 특정 문자 검색하기) [적용] 조건과 일치하는 문자열을 검색하고 싶을 떄 [문법] 메소드 의미 반환 /패턴/.test(문자열) 문자열과 패턴의 일치 여

stonefree.tistory.com

 


 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김