🤟
Vanilla-JS
  • TRIPLE-PLUS Adout
  • Babel.JS
  • 01.Vanilla-JS
    • 01. Hello JavaScript
    • 02. 변수
      • 02-1.지키면 좋은 룰(더 좋은 스타일을 위해서)
      • 02-2.숫자형꿀팁(수식 줄이기)
    • 03. 연산자
    • 04. 조건문
    • 05. 함수
      • this의 의미 6개 총정리
      • event listener와 constructor
      • 05-1. return:돌려주다
      • 05-2. 형 변환 함수
      • 05-3. Arrow function
    • 06. 객체
    • 07. 배열
      • 07-1. 배열 안에 배열(2차 배열)
      • 07-2. 배열내장 함수(forEach)
      • 07-3. 배열내장 함수(sort)
      • 07-4. 배열내장 함수(map)
      • 07-5. 배열내장 함수(indexOf)
      • 07-6. 배열내장 함수(filter)
      • 07-7. 배열내장 함수(splice, slice)
      • 07-8. 배열내장 함수(shift, unshift, pop, push)
      • 07-9. 배열내장 함수(concat, join)
      • 07-10. 배열내장 함수(reduce)
      • 07-10. 배열내장 함수(reduce)2
    • 08. 반복문
    • 09. Class와 프로토타입
      • 09-1. 프로토타입과 클래스 - 생성자
      • 09-2. 프로토타입과 클래스 - 생성자 상속하기
      • Class & Constructor & Method
      • super
      • Static Method
      • Class Getter, Setter
      • Information Hiding
      • Inheritance & Polymorphism
      • Overriding
      • Abstract Class
      • Interface
    • Math 정리
    • String 정리
    • Array정리
    • Date 정리
      • D-day 구하기
  • 02.Vanilla-JS
    • 01.삼항연산자
    • 02. Truthy and Falsy
    • 03. 단축 평가 논리 계산법
    • 04. 함수 업그레이드 (default parameter/arguments)
    • 05. 조건문 더 스마트하게 쓰기
    • 06. 비구조화 할당 (구조분해) 문법
    • 07. spread 와 rest
      • 함수 파라미터에서의 rest(params)
      • 함수 인자에서의 spread
    • 08. 자바스크립트의 Scope 에 대한 이해
    • 09. Hoisting 이해하기
    • 10. Native DOM 선택
  • 03.비동기 처리
    • 01. fetch, then, catch[Promise] 이해하기
    • 02. 직접 만들어보는 Promise 객체
    • 03. async/await
    • 04. Promise all, Promise.race
  • REST API 제대로 알고 사용하기
    • mongodb Atlas
    • mongodb Atlas(DB)에 접근하려면
    • URL 이름짓기 관습
    • Database에 자료 저장하는 법
    • 게시물마다 번호를 달아 저장하기
    • 게시물마다 번호를 달아 저장하기2
  • JQUERY + SCRIPT 유용한 코드 정리
  • Practice(실습)
    • 카운터 만들기
    • reduce
    • 데이터 자료형 활용하기1
    • 데이터 자료형 활용하기2
    • 데이터 가지고 놀기(응용)1
    • 데이터 가지고 놀기(응용)2
    • REST API
    • 배열 만들기1
    • 배열 만들기2
    • 배열 만들기3
    • 비구조화 할당
    • rest + spread(응용)1
    • rest + spread(응용)2
    • rest + spread(응용)3
    • 반복문 내장함수(응용)1
    • 함수 가지고 놀기(응용)1
    • 서버와의 통신1
    • 서버와의 통신2
    • new Promise(응용)2
    • new Promise(응용)3
    • 자바스크립트 이벤트 위임 핵심 정리
Powered by GitBook
On this page
  • String 정리
  • 문자열의 길이
  • 특정 인덱스의 문자 받아오기
  • 문자열 안에서 다른 문자열 검색
  • 마지막 인덱스 찾기
  • 대소문자 변환
  • 대문자로 바꾸기
  • 소문자로 바꾸기
  • 문자열 자르기
  • 시작 지점과 끝 지점으로 자르기
  • 시작 지점과 길이로 자르기
  • 앞뒤의 공백을 없애줍니다.
  • 그리고...

Was this helpful?

  1. 01.Vanilla-JS

String 정리

String 정리

문자열의 길이

length 속성은 문자열의 길이를 담고 있습니다.

const str = 'Codeit';
console.log(str.length);
6

특정 인덱스의 문자 받아오기

str.charAt(index)를 하면 문자열 str의 index 인덱스에 있는 문자를 받아올 수 있습니다. str[index]와 같은 셈이죠.

const str = 'Codeit';
console.log(str.charAt(2));
d

str.charAt(index)와 str[index]에는 약간의 차이가 있는데, 이 부분은 다음 챕터에서 배워보도록 하겠습니다.

문자열 안에서 다른 문자열 검색

str.indexOf(searchValue)를 하면 문자열 str 내에 문자열 searchValue가 포함되어 있는지 확인할 수 있습니다.

  1. 만약 포함되어 있다면, 문자열이 시작되는 문자의 인덱스가 리턴됩니다.

  2. 포함되어 있지 않다면, -1이 리턴됩니다.

  3. 여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴됩니다.

예시를 통해 살펴봅시다.

const str = 'Hello World!';

console.log(str.indexOf('e'));
console.log(str.indexOf('z'));
console.log(str.indexOf('ello'));
console.log(str.indexOf('o'));
// 결과)
1
-1
1
4

마지막 인덱스 찾기

lastIndexOf는 indexOf와 동일한데, 가장 뒤에 위치한 검색 결과를 찾아줍니다. 예를 들어 봅시다. 'Hello World!'에는 o가 두 번 나옵니다. 이 때 indexOf는 앞에 있는 o를, lastIndexOf는 뒤에 있는 o를 찾아주는 거죠.

const str = 'Hello World!';

console.log(str.indexOf('o'));
console.log(str.lastIndexOf('o'));
// 결과)
4
7

대소문자 변환

대문자로 바꾸기

str.toUpperCase()를 하면 str의 모든 글자가 대문자로 바뀌어서 리턴됩니다.

const str = 'Codeit';
console.log(str.toUpperCase());
// 결과)
CODEIT

소문자로 바꾸기

str.toLowerCase()를 하면 str의 모든 글자가 소문자로 바뀌어서 리턴됩니다.

const str = 'Codeit';
console.log(str.toLowerCase());
// 결과)
codeit

문자열 자르기

시작 지점과 끝 지점으로 자르기

str.substring(indexStart, indexEnd)를 하면 인덱스 indexStart부터 인덱스 indexEnd전까지의 문자열을 잘라서 만든 새로운 문자열이 리턴됩니다. 만약 indexEnd를 쓰지 않으면, 인덱스 indexStart부터 끝까지 문자열이 잘립니다.

const str = 'Hello World!';

console.log(str.substring(2, 5));
console.log(str.substring(2));
// 결과)
llo
llo World!

시작 지점과 길이로 자르기

str.substr(start, length)를 하면 인덱스 start부터 길이 length의 문자열이 잘려서 리턴됩니다.

const str = 'Hello World!';

console.log(str.substr(2, 5));
// 결과)
llo W

앞뒤의 공백을 없애줍니다.

str.trim()을 하면 문자열 str의 앞뒤로 있는 '공백(띄어쓰기, 들여쓰기, 줄바꿈 등)'을 모두 지운 새로운 문자열이 리턴됩니다.

const str = '        Hello World!      ';

console.log(str.trim());
// 결과)
Hello World!

그리고...

PreviousMath 정리NextArray정리

Last updated 5 years ago

Was this helpful?

더 많은 내용을 알고싶다면, 를 참고해보세요!

이 링크