본문 바로가기

패스트캠퍼스

JS 데이터. 문자, 숫자 [패스트캠퍼스 챌린지 05일차]

문자

String 전역 객체는 문자열(문자의 나열)의 생성자입니다.

indexOf

'Hello World'.indexOf()
/**new String이라는 생성자 함수 대신 리터럴 방식으로 데이터를 만들 수 있음*/
// 문자 데이터 뒤에 직접적으로 함수를 작성 가능
// String.prototype.indexOf()
// world라는 인수를 줘보자
'Hello world'.indexOf('world')
//결과 반환됨
//반환된 내용을 result라는 변수에 저장
const result = 'Hello world'.indexOf('world')
// 출력해보까연
console.log(result) // 6
//제로 베이스드
  • 문자 데이터 내부에서 인수와 일치하는 값이 없을 때의 출력값
const result = 'Hello world'.indexOf('happy')

console.log(result) // -1

메소드 실험


length

const str = '0123' // 문자데이터

 console.log(str)//0123
 console.log(str.length) // 4 숫자데이터
  • 문자 데이터 날로 들어가도 됨

       console.log('0123'.length) // 4
       console.log('01 23'.length) // 5 띄어쓰기도 하나의 공백 문자임

indexOf

  • Zero based
const str = 'Hello world!'

 console.log(str.indexOf('world')) //6
 console.log(str.indexOf('hotpot')) // -1
  • 불리언 데이터로 '이 단어가 있니 없니'를 확인하고 싶은가. 비교연산자!

      const str = 'Hello world!'
    
      console.log(str.indexOf('hotpot') !== -1 ) // false

slice

  • slice(시작인덱스)
    slice(시작인덱스,종료인덱스)
  • 주의할 점. 반환값은, 종료인덱스까지 포함이 아니라 종료 인덱스 바로 앞까지임
const str = 'Hello world!'

console.log(str.slice(0, 3)) //Hel 0에서 3 직전까지 추출해서 반환쓰

// world를 추출해보까연
console.log(str.slice(6, 11))//world

replace

  • replace(이넘을, 이넘으로 바꾸기)
const str = 'Hello world!' 

console.log(str.replace('world', 'everyone')) // Hello everyone!

// Hello만 남기고싶다면. 즉, ' world!' 없애려면
console.log(str.replace(' world!', '')) // Hello

match

const str = 'kaki@onthetree.com' 
//아이디만 추출해보자
//match메소드에 정규표현식을 사용
console.log(str.match(/.+(?=@)/))
// ['kaki', index: 0, input: 'kaki@onthetree.com', groups: undefined]
//콘솔창ㅇ ㅔ배열 데이터 출력됨
// 배열데이터에서 0번째가 우리가 원하는 값이네
console.log(str.match(/.+(?=@)/)[0])//kaki
//정규표현식ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

trim

  • 자주 사용하니까 꼭 기억
const str = '     Hello world   '

console.log(str.trim()) // 헬로 월드 앞뒤로 있던 공백 문자들이 제거된 채로 출력

숫자

  • Math mdn 구글링. 메소드 구경할 때 매개변수랑 반환값 체크

toFixed

  • 빌드업
const pi = 3.14159265358979

console.log(pi) //3.14159265358979
  • 소수점 둘째 자리까지만 출력하고 싶은데...
//toFixed 메소드 활용. 소수점의 몇번째자리까지 유지할 것인지
const str = pi.toFixed(2)

console.log(str) // 3.14
console.log(typeof str) // string
//toFixed가 문자데이터로 반환한 거임
  • toFixed 사용했더니 문자데이터가 됐네? 나는 숫자를 원하는데??

parseInt

parseFloat

parseInt의 인수로 숫자가 들어있는 문자데이터를 넣으면, 분석 후 숫자만 추출해서 '정수'로 반환
parseFloat의 인수로 숫자가 들어있는 문자데이터를 넣으면, 분석 후 숫자만 추출해서 반환

  • 전역 함수

parse : 분석
int : 정수 integer

const integer = parseInt(str)
const float = parseFloat(str)

console.log(integer) //3 
//3.14에서 소수점 날리고 정수만 남음
console.log(float) //3.14

console.log(typeof integer, typeof float)// number number

random

  • 자주 사용함
    console.log('random: ', Math.random()) // random:  0.xxxxxx
    //난수
    

//기억나는가
export default function random() {
return Math.floor(Math.random()*10)
}


### 간단히 몰아보기

```jsx
console.log('abs: ', Math.abs(-12)) //abs:  12
 //absolute 절대값

 console.log('min: ', Math.min(2, 8)) //min:  2
// 가장 작은 값

 console.log('max: ', Math.max(2, 8)) // max:  8
//가장 큰 값

 console.log('ceil: ', Math.ceil(3.14)) // ceil:  4
// 올림

 console.log('floor: ', Math.floor(3.14)) // floor:  3
// 내림

 console.log('round: ', Math.round(3.14)) // round:  3
 console.log('round: ', Math.round(3.5)) // round:  4
// 반올림


즐겁다...
https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online