js - 문자열

2021. 8. 25. 16:56·SE Bootcamp 내용 정리

ch- 문자열

컴퓨터는 코드와 문자열을 구분하기 위해서 작은 따옴표('')나 큰 따옴표("")를 사용하여 구분
문자열은 string.
문자 하나는 character(char)

[학습목표]
# 문자열의 속성과 메소드를 이용해 원하는 형태로 만들기
* length로 길이 확인    str.length
* 문자열의 글자 하나하나에 대한 접근 str[1]
* 문자열 합치기
* 문자열 원하는 만큼만 선택    str.slice(0,3) 또는 str.substring(0,3)
* 영문을 모두 대문자로 변환    str.toUpperCase()
* 영문을 모두 소문자로 변환    str.toLowerCase()
* 문자열 중 원하는 문자의 index 찾기    str.indexOf(‘a’) 또는 str.lastIndexOf(‘a’)
* 문자열 중 원하는 문자가 포함되었는지 찾기    str.includes(‘a’)

[추가학습]
* 띄워쓰기(“ “)로 문자열을 구분하여 배열로 바꿀 수 있다.    str.split(“ “)
* 위의 배열의 요소 사이에 띄워쓰기(“ “)를 넣어 다시 문자열로 변환도 가능
str.split(“ “).join(“ “)

[문자열 다루기]

*문자에 접근하기(Accessing a Character)
    str[index]

##주의: index로 접근은 가능하지만 값의 변경은 불가(read-only)
##문자열은 항상 read-only이다(새로 값을 할당하지 않는한)

*문자 합치기(Concatenating Strings)
+ 연산자를 쓸 수 있음
string 타입과 다른 타입 사이에 +연산자를 쓰면, string 형식으로 변환됨(toString)
→ 다른 타입이 string 형식으로 변환된다는 뜻(toString)
str1.concat(str2, str3, …); 의 형태로도 사용가능(str1+str2+str3의 의미)

* length PROPERTY
문자열의 전체 길이를 반환    str.length

* indexOf 메서드: str.indexOf(searchValue)
arguments: 찾고자하는 문자열
return value: 처음으로 일치하는 index, 찾고자하는 문자열이 없으면 -1 반환
lastIndexOf는 문자열 뒤에서부터 찾음


ex) ‘Blue Whale’.indexOf(‘Blue’);    //0    Blue가 시작되는 지점부터의 위치값(처음등장하는 인덱스 기준)
    Blue Whale’.indexOf(‘blue’);    //-1 blue가 없으므로
    Blue Whale’.indexOf(‘Whale’);    //5 공백 자리값도 계산
    Blue Whale Whale’.indexOf(‘Whale’);    //5    처음등장하는 인덱스값 기준
    ‘canal’.lastIndexOf(‘a’);        //3    뒤에서부터 찾아서 인덱스값을 반환

# see more: str.includes(searchValue)
// true, false로 리턴(boolean)

* split메서드: str.split(seperator) //분리하는거(쪼개는거)
arguments: 분리 기준이 될 문자열
return values: 분리된 문자열이 포함된 배열

ex) var str=’hello from the other side’;
console.log(str.split(‘ ‘));    //공백’ ‘을 기준으로 해서 분리하는 것
//[‘hello’, ‘from’, ‘the’, ‘other’, ‘side’]
→ csv(comma separate value) 형식을 처리할 때 유용!
# 줄바꿈문자(\n)

*substring메서드: str.substring(start, end)    // 특정 부분만 가져오고 싶을 때
arguments: 시작 index, 끝 index
return value: 시작과 끝 index 사이의 문자열(시작 문자포함/끝은 미포함)을 반환

ex) var str=’abcdefghij’;
console.log(str.substring(0,3));    //’abc’ [0],[1],[2]
console.log(str.substring(3,0));    // ‘abc’     거꾸로 써도 되네?
console.log(str.substring(1,4));    //’bcd’    [1],[2],[3]
console.log(str.substring(-1,4));    //’abcd’    음수는 0취급
console.log(str.substring(0,20));    //’abcdefghij’ index범위까지만 나옴

# see more: str.slice(start, end)
→  substring과 비슷하나 몇가지 차이점이 존재함
slice 또한 substring과 작동 방법에 있어서는 큰 차이가 없지만
slice는 **배열**에도 사용할 수 있어서 좀 더 범용적인 메서드다

*toLowerCase(), toUpperCase() 메서드: *[immutable; 원본이 변하지 않음]*
str.toLowerCase()    /str.toUpperrCase()    
**arguments: 없음!**
return value: 대/소문자로 변환된 문자열

Immutable이란?

모든 string method는 immutable
즉, 원본이 변하진 않음
**그러나 array method는 [immutable] 및 [mutable] 여부를 잘 기억해야 함!**

  • 스스로 찾아보기
    trim 메서드
    공백문자: 탭 문자(\t), Carriage return(\r \n) 및 return 문자(\n)
    match(advanced)
    replace(advanced)
    정규 표현식(advanced)

  • 특정 값이 NaN인지 체크하는 법: isNaN(값);

[Math 객체]

Math.ceil(value)    // 올림
Math.floor(value)    //내림
Math.round(value)    //반올림

#각종 Math 메서드의 사용법
https://share.getliner.com/we6SA
  • slice 메서드: str.slice(숫자)
    해당 숫자 만큼 앞에서부터 제거하고 나머지를 반환해줌(문자열)
    str.slice(시작index, 끝index)
    시작index만큼 앞에서부터 제거하고 난 후 끝index길이 만큼을 반환해줌
    index값으로 음수(-)도 활용 가능하다
  • 문자열을 숫자로 변환: parse 메서드
    parseInt(numStr1)
    parseLong(numStr1)
  • 숫자를 문자열로 변환: toString 메서드
    max.toString()

표현식을 포함해 문자열을 표현하는 방식(template string)

`` 백틱을 이용한다
변수 및 계산에 대해서는 ${} 안에 넣기
`` 안에다가 사용하면 된다

ex)
var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."
참고 https://share.getliner.com/QbK7c
  • 절대값을 반환하는 메서드: Math.abs()
    ex) Math.abs(a – b); 두 수간의 차이 비교


    조건문에서 주의할점! <- 빼먹은 부분임

조건문은 순서도 중요하다 코드의 순서!

[]를 사용하는 것 bracket rotation

MECE(미씨)한 방법으로 조건문을 작성해야 한다.
항목들이 상호배타적이면서 모였을 때는 전체를 이루는 것
→ 겹치지 않으면서 빠짐없이 나눈것

if(argu1){
body}
else if(argu2){
body}
else(){
body
}

'SE Bootcamp 내용 정리' 카테고리의 다른 글

html 기초  (0) 2021.08.27
js - 반복문  (0) 2021.08.26
js - 조건문(conditional)  (0) 2021.08.24
<SEB Full 34th 1주차-2>  (0) 2021.08.24
SEB Full 34th 시작  (0) 2021.08.23
'SE Bootcamp 내용 정리' 카테고리의 다른 글
  • html 기초
  • js - 반복문
  • js - 조건문(conditional)
  • <SEB Full 34th 1주차-2>
레실이
레실이
  • 레실이
    레실이의 티스토리
    레실이
  • 전체
    오늘
    어제
    • 분류 전체보기 (91)
      • SE Bootcamp 내용 정리 (63)
      • 알고리즘 연습 (7)
      • Project 주저리 (4)
      • 기술 면접 source (3)
      • 개발 일상 (12)
      • 생성 AI 활용 (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    node.js
    자료구조
    JS
    MVC
    알고리즘
    useState
    데이터베이스
    PickAndDrink
    ORM
    state
    CSS
    react
    mongoDB
    문자열
    객체
    IT
    Ajax
    node
    ubuntu
    DOM
    CSR
    비동기
    JavaScript
    useRef
    Python
    promise
    CORS
    fastapi
    Linux
    인증/보안
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
레실이
js - 문자열
상단으로

티스토리툴바