Yesterday I Learned..(2021.03.18) (Javascript 6일차) // String object 외

김현재·2021년 3월 19일

String object

문자 처리를 위한 object

문자열 연결 방법

한줄에서 작성

var book = "12" + "AB" + "가나";

+로 문자열 연결 (줄 분리 가능)

var concat = 123 + "abc" +
             "가나다라";

\ (역슬래시)로 문자열 연결 (자주 사용 x)

var concat = "abc \
              가나다라";
console.log(concat);

String()

파라미터 값을 string type으로 변환하여 반환.
값을 미리 작성하지 않으면 빈 문자열 반환.

var value = String(123);
console.log(typeof value);


값 : string

newString()

String Instance를 생성하여 반환.

var obj = newString(123);
console.log (typeof obj);

값 : object (instance의 type은 object

valueOf()

String instnace의 primitive value를 변환한다

var obj = new String(123);
console.log(obj.valueOf());

length property

문자 수를 반환한다.

var value = "ABC";
for (var k=0; k<value.length; k++){
    console.log(value[k]);
}

이 경우 index 값에 대응하여 문자 수를 반환

trim()

문자열 앞, 뒤의 white space를 삭제한다.

var value = "  abcd  ";
console.log(value.length);
-> 공백 포함하여 8로 산출

console.log(value.trim().length);
->공백 제외하여 4로 산출

toString()

data위치의 값을 string type으로 변환

형태)

data.toString()

예)

var value = 123;
var result = value.toString();
console.log (typeof result);

값 : string

파라미터 값을 채워넣으면 에러 난다
파라미터 내 값을 object로 간주
built-in object의 형태는 key:value인데 파라미터 내에는 key:value형태로 정의되어 있지 않아서 object undefined이런 식으로 엉뚱한 값이 나옴

JS 함수 호출 구조

JS는 data type으로 object를 결정하고, object의 함수를 호출한다.

var value = 123;
value.toString();
-> Number object의 toString()을 호출

"123"toString();
-> String object의 toString()을 호출

charAt()

파라미터 내에 작성한 인덱스의 문자를 반환한다.

index는 0부터 시작한다

var value = "sports";
console.log (value.charAt(1));
->결과 : p

console.log (value[1]);
->결과 : p

문자열의 길이보다 index가 크면 빈 문자열 ("")을 반환한다.

또한, 일반적으로 존재하지 않으면 undefined를 반환한다.

var value = "sports";
console.log (value.charAt(12));
-> ""
index# 12에 대응하는 값이 없기에 공란으로 반환

console.log (value[12]);
->undefined
property 이름 중 해당 이름이 없기 때문에 작성하지 않았다는 시맨틱으로 undefined 반환

indexOf()

검색 대상(data)의 문자열에서 파라미터 문자와 같은 첫번째 index 반환

형태)

indexOf(검색할 문자열, 검색 시작 위치( default : 0)

검색 기준

왼쪽 -> 오른쪽으로 검색

var value = "123123";
console.log (value.indexOf(2));
-> 1

console.log (value.indexOf(23));
->1
23이 첫번째로 나오는 곳에서 index 반환

두번째 파라미터를 작성하면 작성한 index부터 검색

var value = "123123";
console.log (value.indexOf(2,3));
->4

같은 문자가 없으면 -1 반환
이 사항을 참고하여 보통 찾는 문자가 있는지 존재여부 참고하는 용으로 사용
- 두번째 파라미터가 0보다 작으면 -> 처음부터 검색
- 두번째 파라미터 값이 length보다 크면 -> -1 반환
- 두번째 파라미터 값이 NaN이면 -> 처음부터 검색

var value = "123123";
console.log (value.indexOf(2,-1));
-> 1

console.log (value.indexOf(2,9));
-> -1

console.log (value.indexOf(2,"a"));
-> 1

lastIndexOf()

위와 역으로 오른쪽 -> 왼쪽으로 검색.
하지만 도출되는 index 및 파라미터 두번째 값으로 사용하는 index는 모두 왼쪽 방향부터 count됨..

규칙은 위와 같음

var value = "123123";
console.log (value.lastIndexOf(1,4));

->3

concat()

parameter값을 작성 순서대로 연결하여 문자열로 반환

var obj = new String (123);
console.log (obj.concat("ABC"));
->123ABC

var result = "배구".concat ("김연경", 10);
console.log(result);
->배구김연경10

toLowerCase() / toUpperCase()

영문 대문자(소문자)를 소문자(대문자)로 변환

console.log ("ABCDE".toLowerCase());
->abcde

console.log ("abcde".toUpperCase());
->ABCDE

substring()

형태)

substring(시작, 끝)

기능) parameter의 시작 index부터 끝 index 직전까지 반환

var value = "01234567";
console.log (value.substring(2,5));

->234

두번째 parameter 미기재 시 반환대상의 끝까지 반환

var value = "01234567";
console.log (value.substring(2));

->234567

추가 참고)

두번째 parameter 값이 전체 length보다 크면 전체 문자열 length사용
(즉 끝까지 반환)
시작 index값이 음수이면 0으로 간주
첫번째 parameter 값>두번째 parameter 값인 경우 형태를 뒤집어서 처리한다
NaN은 0으로 간주한다.

var value = "01234567";
console.log (value.substring(5,20));
-> 567

console.log (value.substring(-7,2));
-> 01

console.log (value.substring(5,1));
-> 1234

console.log (value.substring(5,"a"));
-> 01234

substr()

형태)

substr(시작index, 반환할 문자 수)

기능)
파라미터의 시작 인덱스부터 지정한 문자 수를 반환

var value = "01234567";
console.log (value.substr(0,3));

-> 012

추가 참고)

첫번 째 parameter값이 음수면 length에서 parameter 값을 더해 시작 index로 사용
두번째 parameter을 작성하지 않으면 양수 무한대로 간주 (즉 끝까지 반환)

var value = "01234567";
console.log (value.substr(-3,3));
-> 567

console.log (value.substr(3));
-> 34567

slice()

형태)

slice(시작, 끝)

기능)
parameter의 시작 index부터 끝 index 직전까지 반환
(substring이랑 되게 비슷하니 주의)

var value = "01234567";
console.log (value.slice(1,4));
->123

console.log (value.slice(false,4));
->0123

*false, null, undefined, NaN, 시작 값 미작성 시 = 0으로 간주

추가 참고)

parameter를 모두 작성하지 않으면 -> 전체 반환
두번째 parameter 미작성 시 length사용 (즉 전체 사용)
(첫번쨰 또는)두번째 parameter 값이 음수일 경우 -> length에 더해 사용
첫번째 parameter값이 두번째 값보다 크거나 같을 경우 -> 빈 문자열 도출
(substring 과의 주요 차이점)

var value = "01234567";
console.log (value.slice(3));
->34567

console.log (value.slice(5,3));
->""

정규 표현식을 사용할 수 있는 함수

정규 표현식?

문자열을 pattern으로 매치하는 형태
pattern : ^, &, *, +

match()

형태)

match(정규표현식 or 문자열)

기능)
매치 결과를 배열로 반환
매치 대상에 정규 표현식의 패턴을 적용하여 매치하고 그 결과를 반환

var value = "Sports";
console.log (value.match(/s/));
-> [s]
정규 표현식은 슬래시 사이에 작성.
반환 형태는 "배열"이다

console.log (value.match("spo"));
-> null
소문자 spo는 값에 없기에 매치되지 않는다
처리했는데 없다는 뜻으로 null반환

replace()

형태)

replace(정규표현식 또는 문자열, 대체할 값 또는 함수)

기능)
매치 결과를 파라미터에 작성한 값으로 대체하여 반환
두번째 파라미터에 함수를 작성하려면 먼저 함수를 실행하고, 함수에서 반환한 값으로 대체

var value = "abcabc";
console.log (value.replace ("a", "바꿈"));
-> 바꿈bcabc

console.log (value.replace (/a/, "바꿈"));
-> 바꿈bcabc

function change () {
    return "함수";
}
console.log (value.replace (/a/, change()));
-> 함수bcabc

search()

형태)

search(정규표현식 또는 문자열)

기능)
검색된 첫번째 index 반환
매치되지 않으면 -1 반환
indexOf와 달리 다양한 정규표현식 사용하여 검색 가능하다

var value = "cbacba";
console.log (value.search(/a/));
-> 2

console.log (value.search("k"));
-> -1

split()

split ( 분리자(정규표현식 또는 문자열), 반환 수)

기능)
분리대상을 분리자로 분리하여 배열로 반환

console.log ("12_34_56".split("_"));
->["12", "34", "56"]

분리자를 작성하지 않은 경우
- 빈 문자열("")인 경우 -> 문자를 하나씩 분리
- 분리자 미기재 시 -> 대상 전체를 하나의 배열로 반환

  var value = "123"
  console.log (value.split(""));
  -> ["1", "2", "3"]
  
  console.log (value.split());
  -> ["123"]

두번 째 parameter에 반환할 갯수를 작성한다
분리자가 없으면 대상 전체를 반환한다

var value = "12_34_56_78";
console.log (value.split("_",3));
-> ["12", "34", "56"] (작성한 수 만큼 반환)

console.log (value.split("A"));
-> ["12_34_56_78"]

Unicode 관련 함수

charCodeAt()

charCodeAt(반환 기준 index)

기능)
인덱스 n번째의 문자의 유니코드 코드포인트를 반환
인덱스가 문자열 길이보다 크면 NaN 반환

var value = "1Aa가";
for (var k = 0; k < value.length; k++){
    console.log (value.charCodeAt(k));
}
-> 49, 65, 97, 44032

console.log (value.charCodeAt(12));
-> NaN

fromCharCode()

data(String object).fromCharCode(유니코드, 다수 작성 가능)

기능)
파라미터의 유니코드를 문자열로 변환하고 연결하여 반환
작성하지 않으면 빈 문자열 반환

작성방법)
1. data위치에 string object작성
2. 변환 대상 값은 작성하지 않는다
= String.fromCharCode() 형태다..

console.log(String.fromCharCode(49, 65, 97,44032));
->1Aa가

localeCompare()

비교대상.localeCompare(비교할 값)

기능)
값을 비교하여 위치를 나타내는 값으로 반환
유니코드 코드포인트 값으로 비교

위치 값)
1 : 앞 (빠른 숫자)
0 : 같음
-1 : 뒤 (느린 숫자)

var value = "나";
console.log (value.localeCompare("가"));
-> 1

console.log (value.localeCompare("나"));
->0

console.log (value.localeCompare("다"));
-> -1

Object object

JS object

구분)

built-in object
사전에 만들어놓은 object..
Native object
JS spec에서 정의한 object. Built-in object 포함
JS code를 실행할 때 만드는 object (Argument object)
Host object
Built-in, Native object 를 제외한 object
ex) Window, DOM object

Built-in object property

instance를 만들 수 있는 모든 built-in object에 함수형 property가 모두 포함되어있다 (__proto__에..)

new Object()

new Object(값 optional)

인스턴스를 생성하여 반환한다.
파라미터의 데이터 타입에 따라 생성할 instance 결정

var newNum = new Number (123);
console.log (typeof newNum);
-> object (instance의 type은 항상 object - primitive 값이 123)

console.log (newNum + 100);
-> 223

var newObj = new Object (123);
console.log (typeof newObj);
-> object (또 인스턴스니까)

console.log (newObj + 100);
-> 값이 더해진다는 것은 파라미터 값의 type이 number라는 것.
즉 newObj는 number type instance

파라미터 값이 undefined, null이면 빈 object instance를 반환한다.

var newObj = new Object ();
console.log (newObj);

->{} (빈 object instance = no primitive value)

Object ()

Object 인스턴스 생성
파라미터는 {name : value} 형태

var obj = Object ({name : "책"});
console.log (obj);

-> {name : "책"}
위에 작성한 파라미터 값이 instance의 primitive 값이 된다

var emptyobj = Object ();
console.log (emptyobj);
-> {}
파라미터 내에 작성하지 않으면 undefined로 처리되며 공란의 primitive값이 나온다

object 생성방법

var abc = {}; 또는
var abc = Object();

valueOf()

data 위치에 작성한 instance의 primitive값 변환

var obj = {key : "value"};
console.log (obj.valueOf());

-> {key : "value"}

와..진짜 많이 듣긴 했는데 이렇게 적을게 많을 줄은 몰랐네..

이후 내용은 좀 천천히 포스트 해야겠다...손가락 쑤신다..

김현재

쉽게만 살아가면 재미없어 빙고!

이전 포스트

Yesterday I Learned..(2021.03.16) (Javascript 4일차) // 함수

다음 포스트

Yesterday I Learned..(2021.03.18) (Javascript 6일차) // String object 외

String object

문자열 연결 방법

String()

newString()

valueOf()

length property

trim()

toString()

JS 함수 호출 구조

charAt()

indexOf()

lastIndexOf()

concat()

toLowerCase() / toUpperCase()

substring()

substr()

slice()

정규 표현식을 사용할 수 있는 함수

정규 표현식?

match()

replace()

search()

split()

Unicode 관련 함수

charCodeAt()

fromCharCode()

localeCompare()

Object object

JS object

Built-in object property

new Object()

Object ()

object 생성방법

valueOf()

Yesterday I Learned..(2021.03.16) (Javascript 4일차) // 함수

Netlify: Fail to Compile 해결의 여정

0개의 댓글