[자바스크립트/javascript] 원시 래퍼 타입 ( Boolean, Number, String )

Boolean, Number, String 은 원시 값을  편리하게 조작하기 위해 디자인된 참조타입입니다.

 

볼리언 타입

 

Boolean 타입은 볼리언 값에 대응하는 참조 타입입니다. Boolean 객체를 생성하려면 다음과 같이 Boolean 생성자에 true 나 false 를 넘깁니다.

 

Boolean 인스턴스는 원시 값 true나 false를 반환하도록 ValueOf() 메서드를 오버라이드합니다. toString() 메서드 역시 문자열 "true" 나 'false" 를 반환하도록합니다. 하지만 Boolean 객체에는 혼란스러운 점이 있어 자주 쓰지 않습니다.

 

var falseObject = new Boolean(false);
var result = falseObject && true;
console.log("result = " + result);

var falseValue = false;
result = falseValue && true;
console.log("result = " + result);

 

 

 

 

Boolean 객체는 false 값으로 초기화되었습니다. 그리고 그 객체를 원시 값 ture와 && 연산자로 평가했습니다.

볼리언 연산에서 false && true는 false입니다.

하지만 밑에 코드에서는 false 값이 아니라 객체로 평가 받아 자동으로 true로 변환이 됩니다.

true && true 를 평가한 것이므로 true 입니다.

 

 

원시 불리언 타입과 참조 불리언 타입 사이에는 몇 가지 차이가 더 있습니다.

typeof 연산자는 원시 불리언 타입에서 "boolean" 을 반환하며 참조 불리언 타입에서는 "object"를 반환합니다.

또, Boolean 객체는 Boolean 타입의 인스턴스이며 instanceof 연산자에서 true를 반환하는데, 원시 값은 instanceof 연산자에서 false를 반환합니다.

 

 

var falseObject = new Boolean(false);
var falseValue = false;

console.log("typeof falseObject  =>" + typeof falseObject);
console.log("typeof falseValue   =>" + typeof falseValue);
console.log(falseObject instanceof Boolean);
console.log(falseValue instanceof Boolean);

 

 

 

 

원시 볼리언 값과 Boolean 객체를 반드시 구분할 수 있어야 하며 Boolean 객체는 결코 쓰지 말기를 권합니다.

 

 

Number 타입

 

number 타입은 숫자형 값의 참조 타입입니다. Number 객체는 Number 생성자에 숫자를 넘겨 생성합니다.

 

Boolean 타입과 마찬가지로 Number타입 역시 valueOf(), toLocalString(), toString() 메서드를 오버라이드합니다.

valueOf() 메서드는 객체가 나타내는 원시 숫자형 값을 반환하고 다른 두 메서드는 문자열을 반환합니다.

toString() 메서드는 옵션으로 진법 매개변수를 받습니다.

 

 

var num = 10;

console.log("num.toString()   = " + num.toString());
console.log("num.toString(2)  = " + num.toString(2));
console.log("num.toString(8)  = " + num.toString(8));
console.log("num.toString(10) = " + num.toString(10));
console.log("num.toString(16) = " + num.toString(16));

 

 

 

 

 

Number 타입에는 상속받은 메서드 외에도 숫자를 다양한 혁식의 문자열로 반환하는 메서드가 있습니다.

toFixed() 메서드는 다음과 같이 지정한 만큼의 정확도로 소수점을 찍은 문자열을 반환합니다.

 

var num = 10;

console.log("num.toFixed(2) = " + num.toFixed(2));

 

 

 

 

 

toFixed() 메서드에 넘긴 매개변수 2는 소수점 뒤 몇 자리를 표시할지 나타납니다.

따라서 반환된 문자열은 소수점 뒤 두 자리를 0으로 채운 "10.00" 입니다. 메서드를 호출한 객체의 소수점 뒤 자리 수가 매개변수로 지정한 자리 수 보다 크다면 반올림합니다.

 

 

var num = 10.005;

console.log(num.toFixed(2));

 

 

 

 

 

toExponential() 메서드도 숫자 형식에 관한 메서드입니다. 이 메서드는 숫자를 지수 표기법 문자열로 반환합니다. toFixed() 와 마찬가지로 toExponential() 메서드도 숫자 하나를 매개변수로 받고 이 매개변수가 반환 매개변수가 반환 문자열 형식을 결정합니다.

 

var num = 10;

console.log(num.toExponential(1));

 

 

 

 

 

 

일반적으로 이렇게 작은 숫자를 지수 표기법으로 쓰지 않습니다. 숫자를 표현하기에 가장 적절한 메서드는 toPreCision()입니다.

toPrecision() 메서드는 숫자에 따라 지수 표기법이나 소수점 표기법을 선택하여 반환합니다. 이 메서드는 숫자 표현에 사용할 총 자리수를 매개변수로 받습니다.

 

var num = 99;

console.log(num.toPrecision(1));
console.log(num.toPrecision(2));
console.log(num.toPrecision(3));

 

 

 

 

세 메서드 모두 매개변수로 지정한 자리 수에 맞게 끔 적절히 반올림하거나 내림합니다.

 

Number 객체는 숫자형을 값을 다룰 때 중요한 기능을 포함하고 있지만 Boolean객체와 비슷한 문제가 잠재하므로 사용을 피하는 편이 좋습니다. typeof 및 instanceof 연산자는 원시 숫자와 참조 숫자에서 서로 다르게 동작합니다.

 

var numberObject = new Number(10);
var numberValue = 10;

console.log(typeof numberObject);
console.log(typeof numberValue);
console.log(numberObject instanceof Number);
console.log(numberValue instanceof Number);

 

 

 

typeof 연산자를 호출했을 때 원시 숫자는 항상 "number" 를 반환하지만 Number객체는 Object를 반환합니다.

또 Number 객체는 Number의 인스턴스이지만 원시 숫자는 그렇지 않습니다.

 

 

String 타입

 

String 타입은 문자열을 나타내는 객체이며 다음과 같이 String 생성자를 통해 생성합니다.

 

String 객체는 메서드는 모두 원시 문자열에서 사용할 수 있습니다. valueOf(), toLocaleString(), toString() 메서드는 모두 객체의 원시 문자열 값을 반환합니다.

String의 인스턴스는 모두 length 프로퍼티가 있는데 이 프로퍼티에는 문자열 길이를 나타내는 숫자가 저장됩니다.

 

var stringValue = "hello world";

console.log("stringValue.length = " + stringValue.length);

 

 

 

 

"hello world"의 길이인 숫자 11 을 표시합니다. 주의할 점은 해당 문자열이 2바이트 문자이더라도 한 글자로 계산한다는 점이다.

 

 

문자열의 특정 문자에 접근하는 메서드는 charAt() 과 charCodeAt() 두 가지입니다. 각 메서드는 매개변수를 하나 받는데 이는 원하는 문자의 인덱스입니다. charAt() 메서드는 매개변수로 받은 인덱스에 위치한 문자를 한 글자로 이루어진 문자열로 반환합니다.

 

var stringValue = "hello world";

console.log("stringvalue.charAt(1) => " + stringValue.charAt(1));

 

 

 

 

 

"hello world"의 인덱스 1에 해당하는 문자는  "e" 이므로 charAt(1)을 호출하면 "e"를 반환합니다. 문자 자체가 아니라 문자 코드가 필요할 때는 다음예제 처럼 charCodeAt()을 사용합니다.

 

var stringValue = "hello world";

console.log("stringvalue.charCodeAt(1) => " + stringValue.charCodeAt(1));

 

 

 

 

 

소문자 "e" 문자 코드인 "101"을 표시합니다.

개별 문자에 접근할 방법이 한 가지 더 있습니다. 대괄호 표기법을 써서 특정 문자에 접근할 수 있습니다.

 

var stringValue = "hello world";

console.log("stringvalue[1] => " + stringValue[1]);

 

 

 

 

 

문자열 값을 조작하는 메서드는 다양합니다. contact() 메서드는 문자열을 병합하여 그 결과를 반환합니다.

 

var stringValue = "hello ";
var result = stringValue.concat("world");

console.log("result = " + result);

 

 

 

 

 

concat() 메서드가 받는 매개변수 숫자에는 제한이 없으므로 문자열을 원하는 만큼 넘길 수 있습니다.

 

var stringValue = "hello ";
var result = stringValue.concat("world", "!");

console.log("result = " + result);

 

 

 

 

 

예제에 "hello " 다음에 "world" 와 "!"을 병합합니다. concat() 메서드가 문자열을 합치는 목적으로 만들어지긴 했지만, + 연산자가 더 자주 쓰이며 문자열을 여러 개 합칠 때도 concat() 메서드보다 더 빨리 동작합니다.

 

문자열 일부로 새 문자열을 만드는 메서드가 slice(), substr(), substring() 세 가지 있습니다.

 

var stringValue = "hello world";

console.log("stringValue.slice(3)        =>" + stringValue.slice(3));
console.log("stringValue.substring(3)    =>" + stringValue.substring(3));
console.log("stringValue.substr(3)       =>" + stringValue.substr(3));
console.log("stringValue.slice(3, 7)     =>" + stringValue.slice(3, 7));
console.log("stringValue.substring(3, 7) =>" + stringValue.substring(3, 7));
console.log("stringValue.substr(3, 7)    =>" + stringValue.substr(3, 7));

 

 

 

 

 

slice 와 substring 은 끝내는 위치를 두번째 매개변수에 넣어 같은 결과를 나타내지만, substr() 에서는 두번째 매개변수가 문자 몇 개를 가져올 지 나타냅니다.

 

매개변수에 음수를 넘기면 메서드마다 다르게 동작합니다. slice() 메서드는 음수 매개변수를 받으면 문자열 길이에 해당 매개변수를 더한 값을 사용합니다.

substr() 메서드는 첫 번째 매개변수에 음수를 받으면 문자열 길이에 해당 매개변수를 더한 값을 사용합니다.

두번째 매개변수에 음수를 받으면 0울 사용합니다.

substring() 메서드는 음수 매개변수를 모두 0으로 바꿉니다.

 

var stringValue = "hello world";

console.log("stringValue.slice(-3)        =>" + stringValue.slice(-3));
console.log("stringValue.substring(-3)    =>" + stringValue.substring(-3));
console.log("stringValue.substr(-3)       =>" + stringValue.substr(-3));
console.log("stringValue.slice(3, -4)     =>" + stringValue.slice(3, -4));
console.log("stringValue.substring(3, -4) =>" + stringValue.substring(3, -4));
console.log("stringValue.substr(3, -4)    =>" + stringValue.substr(3, -4));

 

 

 

 

 

문자열 안에서 원하는 문자열의 위치를 찾는 메서드는 indexOf() lastIndexOf() 두 가지입니다.

두 메서드는 모두 매개변수로 넘긴 문자열을 검색해 그 위치를 반환하며 찾지 못했을 때는 -1을 반환합니다.

indexOf()가 문자열 처음에서 검색을 시작하는 반면 lastIndexOf() 는 문자열 마지막에서 검색을 시작하는 점입니다.

 

var stringValue = "hello world";

console.log("stringValue.indexOf('o') => " + stringValue.indexOf("o"));
console.log("stringValue.lastIndexOf('o') => " + stringValue.lastIndexOf("o"));

 

 

 

 

두 메서드는 옵션으로 두 번째 매개변수를 받을 수 있는데 이는 검색을 시작할 인덱스입니다. 즉, indexOf() 메서드는 두 번쨰 매개변수보다 앞에 있는 문자는 전부 무시하고 해당위치부터 문자열을 검색합니다. lastIndexOf() 메서드는 두 번째 매개변수보다 뒤에 있는 문자는 전부 무시하고 해당 위치부터 검색을 합니다.

 

var stringValue = "hello world";

console.log("stringValue.indexOf('o', 6) => " + stringValue.indexOf("o", 6));
console.log("stringValue.lastIndexOf('o', 6) => " + stringValue.lastIndexOf("o", 6));

 

 

 

 

trim() 메서드는 문자열을 복사한 후 앞뒤 공백을 모두 제거한 결과를 반환합니다.

 

var stringValue = "    hello world    ";

console.log(stringValue.trim());

 

 

 

대소문자 변환에 관한 메서드는 toLowerCase(), toLocaleLowerCase(), toUpperCase(), toLocaleUpperCase() 네 가지입니다.

toLowerCase() 와 toUpperCase() 메서드는 자바의 메서드를 본따 만들어진 메서드입니다.

toLocaleLowerCase() 와 toLocaleUpperCase() 메서드는 지역에 맞게 사용하도록 만든 지역 메서드입니다.

 

var stringValue = "hello world";

console.log(stringValue.toLocaleUpperCase());
console.log(stringValue.toUpperCase());
console.log(stringValue.toLocaleLowerCase());
console.log(stringValue.toLowerCase());

 

 

 

 

일반적으로 말해 작성한 코드가 어느 지역에서 실행될지 모른다면 지역 메서드를 쓰는 편이 안전합니다.

 

 

String 타입에는 문자열 내에서 패턴 매칭을 하도록 만들어진 메서드가 몇가지 입니다. 가장 많이 쓰이는 메서드는  match() 인데 RegExp 객체의 exec() 메서드와 같은 결과를 반환합니다.

 

var text = "cat, bat, sat, fat";
var pattern = /.at/;

var matches = text.match(pattern);
console.log(matches.index);
console.log(matches[0]);
console.log(pattern.lastIndex);

 

 

 

 

 

배열의 첫 번째 데이터는 패턴에 일치하는 문자열 전체이고 나머지 데이터는 패턴에서 지정한 캡처 그룹입니다.

 

 

패턴을 찾는 메서드에는 search()도 있습니다. search() 메서드는 패터에 일치하는 첫 번째 문자열 인덱스를 반환하며 일치하는 것을 찾지 못했을 때는 -1을 반환합니다. search()는 항상 문자열 처음에서 검색을 시작합니다.

 

var text = "cat, bat, sat, fat";
var pos = text.search(/at/);

console.log("pos = " + pos);

 

 

 

 

문자열 일부를 바꾸는 메서드는 replace()입니다. 이 메서드는 매개변수를 두개 받는데 첫 번째 매개변수는 RegExp 객체 또는 문자열이고 두 번째 매개변수는 문자열 또는 문자열을 반환하는 함수입니다.

 

var text = "cat, bat, sat, fat";
var result = text.replace("at", "ond");

console.log(result);

 

 

 

 

해당 문자열과 일치하는 첫 번째 문자열만 바꿉니다. 일치하는 문자열 전체를 바꾸려면 다음과 같이 정규표현식에 g플래그를 써서 넘기는 방법 외에는 없습니다.

 

var text = "cat, bat, sat, fat";
var result = text.replace(/at/g, "ond");

console.log(result);

 

 

 

 

두 번째 매개변수에 문자열을 쓸 때는 정규 표현식에서 얻은 정보를 다양한 방법으로 응요하는 특수문자가 있습니다.

 

var text = "cat, bat, sat, fat";
var result = text.replace(/(.at)/g, "word ($1)");

console.log(result);

 

 

 

 

 

패턴을 다루는 마지막 문자열 메서드는 split() 입니다. 이 메서드는 텍스트를 구분자를 기준으로 분리해서 배열에 담아 변환합니다.

 

var colorText = "red,blue,green,yellow";
var color1 = colorText.split(",");
var color2 = colorText.split(",", 2);
var color3 = colorText.split(/[^\,]+/);

console.log(color1);
console.log(color2);
console.log(color3);

 

 

 

 

localeCompare() 메서드는 문자열 두 개를 비교한 후 다음과 같이 세 가지 값 중 하나를 반환합니다.

 

메서드를 호출하는 텍스트가 매개변수로 넘긴 문자열보다 알파벳 순서상 뒤에 있다면 음수를 반환합니다.

메소드를 호출하는 텍스트와 매개변수 문자열이 일치한다면 0을 반환합니다.

메소드를 호출하는 텍스트가 매개변수로 넘긴 문자열보다 알파벳 순서상 앞에 있다면 양수를 반환합니다.

 

var stringValue = "yellow";

console.log(stringValue.localeCompare("brick"));
console.log(stringValue.localeCompare("yellow"));
console.log(stringValue.localeCompare("zoo"));

 

 

 

 

 

String 생성자에는 fromCharCode() 라는 메서드도 있습니다. 이 메서드가 하는 일은 문자 코드를 받아 이를 문자열로 변환하는 겁니다. 간단히 생각해 charCodeAt() 메소드가 하는 일을 거꾸로 한다고 생각하면 됩니다.

 

console.log(String.fromCharCode(104, 101, 108, 108, 111));

 

 

 

 

String 객체에서 fromCharCode()를 호출하며 해당하는 문자 코드를 넘겼습니다.

 

 

HTML 메서드

 

 

자바스크립트에서는 동적으로 HTML 형식을 생성할 수 있는 메소드가 몇가지 있습니다.

 

var StringHTML = "string";

console.log(StringHTML.anchor("name"));
console.log(StringHTML.big());
console.log(StringHTML.bold());
console.log(StringHTML.fixed());
console.log(StringHTML.fontcolor("color"));
console.log(StringHTML.fontsize("size"));
console.log(StringHTML.italics());
console.log(StringHTML.link("url"));
console.log(StringHTML.small());
console.log(StringHTML.strike());
console.log(StringHTML.sub());
console.log(StringHTML.sup());