JavaScript

[JS] JS 문자데이터(String)

2023. 3. 15. 10:00
목차
  1. indexOf()
  2. 매개변수
  3. length()
  4. slice()
  5. replace()
  6. trim()
728x90
반응형

indexOf()

indexOf() 매서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환.
일치하는 값이 없으면 -1반환

const result = 'Hello world'.indexOf('world')
console.log(result)

// 결과 : 6

매개변수

searchValue

fromeIndex

만약 Boolean처럼 참,거짓의 값을 출력하고 싶을 때

const str = 'Hello world'
console.log(str.indexOf('HEROPY') !== -1)
// 부정일치 선택자니까 false

length()

length 속성은 UTF-16 코드 유닛을 기준으로 (공백포함)문자열의 길이를 나타냅니다.

const str = 'Life, the universe and everything. Answer:';

console.log(`${str} ${str.length}`);
// Expected output: "Life, the universe and everything. Answer: 42"

일반적인 사용법

var x = 'Mozilla';
var empty = '';

console.log('Mozilla는 코드 유닛 ' + x.length + '개의 길이입니다.');
/* "Mozilla는 코드 유닛 7개의 길이입니다." */

console.log('빈 문자열은 ' + empty.length + '의 길이를 가집니다.');
/* "빈 문자열은 0의 길이를 가집니다." */

slice()

slice() 메소드는 문자열의 일부를 추출하면서 새로운 문자열을 반환합니다. (zero-based)

str.slice(beginIndex[, endIndex])

const str = 'Hello world'
console.log(str.slice(0,3))
//Hel

예시
slice()를 사용하여 새 문자열 생성하기.

var str1 = 'The morning is upon us.', // the length of str1 is 23.
    str2 = str1.slice(1, 8),
    str3 = str1.slice(4, -2),
    str4 = str1.slice(12),
    str5 = str1.slice(30);

console.log(str2); // OUTPUT: he morn
console.log(str3); // OUTPUT: morning is upon u
console.log(str4); // OUTPUT: is upon us.
console.log(str5); // OUTPUT: ""

replace()

replace()메서드는 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환

const str = 'monamo@naver.com.'
console.log(str.match(/.+(?=@)/)[0])
//위의 정규 표현식 해석
//@를 기준으로 ()에 있는 내용이 @기호에 앞에있는 문자를 일치 시킬것인데 .(한글자)들 중에 최대한 많이(+) 일치 시킬 것

var newStr = str.replace(regexp|substr, newSubstr|function)

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';

console.log(p.replace('dog', 'monkey'));
// Expected output: "The quick brown fox jumps over the lazy monkey. If the dog reacted, was it really lazy?"

const regex = /Dog/i;
console.log(p.replace(regex, 'ferret'));
// Expected output: "The quick brown fox jumps over the lazy ferret. If the dog reacted, was it really lazy?"

예제

var str = 'Twas the night before Xmas...';
var newstr = str.replace(/xmas/i, 'Christmas');
console.log(newstr);  // Twas the night before Christmas...

trim()

trim() 메서드는 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환합니다.

const str = '    Hello world    '
console.log(str) 
//     Hello world    

console.log(str.trim()) 
//Hello world
728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript' 카테고리의 다른 글

[JS] 배열API  (2) 2024.02.28
[JS] JS 숫자데이터(Number)  (0) 2023.03.15
[JS] JS 생성자와 프로토타입  (0) 2023.03.14
[JS] JS 스코프(Scope) 유효범위 가볍게 이해하기  (0) 2023.03.14
[JS] 콜백(Callback) 함수란?  (0) 2023.02.23
  1. indexOf()
  2. 매개변수
  3. length()
  4. slice()
  5. replace()
  6. trim()
'JavaScript' 카테고리의 다른 글
  • [JS] 배열API
  • [JS] JS 숫자데이터(Number)
  • [JS] JS 생성자와 프로토타입
  • [JS] JS 스코프(Scope) 유효범위 가볍게 이해하기
우주방랑자 개자이너 박모나
우주방랑자 개자이너 박모나
개발자 디자이너가 되기 위해 그간 쌓은 물경력을 회복시키는 중입니다. 다양한 정보를 습득 중입니다 멋진 개자이너가 될겁니다.
250x250
우주방랑자 개자이너 박모나
우주방랑자 개자이너
우주방랑자 개자이너 박모나
전체
오늘
어제
  • 분류 전체보기 (23)
    • UIUX (1)
    • Figma (1)
    • JavaScript (10)
    • REACT (1)
    • CSS&SCSS (1)
    • HTML (1)
    • 10주완성 프로젝트 캠프 (8)

블로그 메뉴

    공지사항

    인기 글

    태그

    • 피그마
    • 유데미
    • 인사이드아웃
    • 개발자부트캠프
    • 프로젝트캠프
    • 스나이퍼팩토리
    • 리액트
    • react
    • 개발캠프
    • 프로젝트캠프후기
    • IT개발자캠프
    • IT개발캠프
    • figma
    • 웅진씽크빅

    최근 댓글

    최근 글

    hELLO · Designed By 정상우.
    우주방랑자 개자이너 박모나
    [JS] JS 문자데이터(String)
    상단으로

    티스토리툴바

    개인정보

    • 티스토리 홈
    • 포럼
    • 로그인

    단축키

    내 블로그

    내 블로그 - 관리자 홈 전환
    Q
    Q
    새 글 쓰기
    W
    W

    블로그 게시글

    글 수정 (권한 있는 경우)
    E
    E
    댓글 영역으로 이동
    C
    C

    모든 영역

    이 페이지의 URL 복사
    S
    S
    맨 위로 이동
    T
    T
    티스토리 홈 이동
    H
    H
    단축키 안내
    Shift + /
    ⇧ + /

    * 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.