고정 헤더 영역
상세 컨텐츠
본문
자바스크립트 변수 타입 중 문자열, 배열, JSON은 쪼메 깊게 다루어 볼 필요가 있당!
(왜에? 아주 자주 거의 항상 누네띠게 쓰이니깡!, 자주 쓰는 메소드를 보장)
먼저 문자열(string) 메소드 몇 개 알아보장!
비대면이라 요런 부분은 재미를 주기 어렵당! 너그러운 이해가 필수당!
타이핑을 추천하지만, 오늘 기분이 마악 쪼메 그렇다면, Copy & Paste도 괘안탕!
(당신은 매우 긍정적이어서 곧 불안감으로 한번 더 확인 할 사람이니깡!)
문자열.html 파일을 아래 내용으로 채우고, 실행 결과와 매칭 시킨 후 (곧 이해)
나중에 VS CODE에서 코드 자동완성 기능으로 그저 누느로 골라낼 수 있을 정도만 하장!
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
var testStr = "Hello Roze!,Where is Roze?, Roze is Here";
// 속성 length
alert("length: " + testStr.length); // 문자열 길이
// 메소드 toUpperCase(),toLowerCase()
alert("소문자" + testStr.toUpperCase()); // 대문자로 바꾸깅
alert("대문자" + testStr.toLowerCase()); // 소문자로 바꾸깅
// 메소드 includes("찾는문자열")
alert("Roze: " + testStr.includes("Roze")); // 특정 문자열을 포함하면 true
alert("jenni: " + testStr.includes("jenni")); // 안 포함 하고 있으니 false
alert("1 roze: " + testStr.includes("roze")); // 소문자 roze를 찾으닝 false
alert("2 roze: " + testStr.toLowerCase().includes("roze")) // 문자열을 소문자로 바꾼후 roze검색 true
// 메소드 indexOf("찾는문자열")
alert("Roze: " + testStr.indexOf("Roze")); // 찾은 위치 index는 0부터
alert("jenni: " + testStr.indexOf("jenni")); // 못 찾으면 -1
alert("3 roze: " + testStr.indexOf("roze")); // 못 찾으면 -1
alert("4 roze: " + testStr.toLowerCase().indexOf("roze")) // 찾은 index 위치
// 메소드 substring(시작인덱스, 끝인덱스)
var v_substring = testStr.substring(6,10); // index 6에서 9번까지,10은제외
alert("v_substring: " + v_substring);
alert("testStr: " + testStr); // 원본 문자열은 영향없음
// 메소드 substr(시작인덱스, 몇개)
var v_substr = testStr.substr(6,4); // index 6부터 글자 4개
alert("v_substr: " + v_substr);
alert("testStr: " + testStr); // 원본 문자열은 영향없음
// 메소드 replace("찾는문자열", "바꿀문자열")
var v_replace = testStr.replace("Roze","로제"); // 처음 찾은 Roze만 ->로제
alert("v_replace: " + v_replace);
alert("testStr: " + testStr); // 원본 문자열은 영향없음
// 메소드 replaceAll("찾는문자열", "바꿀문자열")
var v_replaceAll = testStr.replaceAll("Roze","로제"); // 모든 Roze -> 로제
alert("v_replace: " + v_replaceAll);
alert("testStr: " + testStr); // 원본 문자열은 영향없음
// 메소드 split("쪼갤기준문자열")
var v_split = testStr.split(","); // ,위치에서 쪼개서 배열로 리턴
for(var i=0; i<v_split.length; i++){
alert("개별값: " + v_split[i]);
}
alert("testStr: " + testStr); // 원본 문자열은 영향없음
alert("화긴요망!!: " + testStr.split("Roze"));
</script>요기서 잠깐만요!!!! 짚고 넘어가야 할 게 있어용!
2023.06.01 - [자바스크립트] - 시베리안 허숙희의 자바스크립트 비기닝 4 글에서
문자열은 원시타입(primitive) 이라 했던 말을 기억해내장(안나도 난당! 잠재의식에 있당)
원시타입은 기본 타입이므로 속성과 메소드를 가질 수 없당!(가졌다면 Object 곧 객체당!)
그럼 위 코드에서 어떻게 문자열은 length속성 및 여러 메소드를 쓸 수 있는 것인강?
비밀은 원시타입 string이 있고 object타입 String이 있는뎅, .(점)을 붙여서 사용하는 순간
내부적으로 String object타입으로 바뀐당!
아래 코드를 실행해 보고, 소스라인과 결과를 누느로 일치시켜 확인하장!
number 원시타입도 Number객체(class로 보장)가 별도로 존재한당!
브라우져에서 F12를 누르고,console 탭을 선택해서 console.log("objStr:",objStr)은
어떤 모습으로 출력되는지 꼬옥 확인하공, 아프로는 console을 마니 활용하도록하장!
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
/* string vs String */
var primitiveStr = "로제님"; // 원시타입(Primitive)
alert("primitiveStr: " + typeof(primitiveStr));
var objStr = new String("로제님"); // 객체타입(object)
alert("objStr: " + typeof(objStr));
// alert가 꼬옥 필요할 때가 있는데, 보통은 console.log 추천
// 왜냐공? 더 자세하니까용, F12 눌러 항상 붙어사세용
console.log("objStr:",objStr);
/* number vs Number */
var primitiveNum = 272; // 원시타입(Primitive)
alert("primitiveNum: " + typeof(primitiveNum));
var objNumber = new Number(272); //객체 타입(object)
alert("objNumber: " + typeof(objNumber));
</script>보통은 저런 클래스나 객체를 Wrapper(래퍼)라 부르는뎅,
불편한 걸 편하게 쓰도록 포장해주었다는 의미당!
그럼 원시타입은 무엇이 불편해서 래퍼를 제공하는 가? 원시타입은 다 불편하당!!!
예를 들면 number원시타입에 안전하게 쓸 수 있는 최대값은 얼마?? 당
number는 몇 bit로 구성되었는가?, 부호는 1bit 먹는강?,
그 다음엔 계산기로 계산해야 하는 수고를 해야한당!
숫자를 돈 단위로 세자리마다 ,(꼼마)를 찍고 싶다면
문자열로 바꿔 3개씩 사이에 ,(꼼마)를 더해야 한당!
쪼메 마니 오버하면 아우 그런 귀차니즘을 설마 자주 해야 하는 건 아니죠? 한번도 시로용!
아래 코드처럼 Number의 객체(class로 보장)의 준비된 static 메소드로 간단히 구현가능하당!
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
var howMuch = 27272727272;
//세자리 마다 꼼마 찍깅!
alert(howMuch.toLocaleString());
//number로 안전하게 쓸 수 있는 최대값은
alert(Number.MAX_SAFE_INTEGER);
//parseInt 메소드는 사실 Number꺼당
var strToInt = Number.parseInt;
alert(Number.parseInt("373"));
alert(strToInt("272Good"));
</script>
아래 설명은 이해 안되면 일단 무시하고 너머가도 벨이 괘찮당!
일부러 Number.parseInt를 넣었는뎅, parseInt를 window의 메소드로 이해하는 사람이 많은데
사실은 Number의 static 메소드당!
strToInt란 변수(window의 속성이 됨)에 참조시켜 사용하는 예를 재미로 한 줄 넣어보았당!
(무언가 아이디어가 샘 솟는다면 당신은 아주 많이 훌륭하당!, 재능이 넘친당!)
안타깝게도 자바스크립트는 초보자를 위한 좋은 책이나 추천할 만한 책은 아직 보지 못했당!
하지만 부정보단 긍정을 사랑하는 당신이라면 한 두번만 고비를 넘기면,
커다란 자유를 선물받을 것이당! (책 보다는 유투브를 검색하길 추천한당! 동적설명!)
조금만 익숙해지면 MDN 사이트를 비롯해서, 정말 좋은 자료들이 넘쳐남을 알 수 있을 것이당!
https://www.youtube.com/watch?v=iawgB2CDCrw
'자바스크립트' 카테고리의 다른 글
| 시베리안 허숙희의 자바스크립트 비기닝 11 (JSON) (0) | 2023.06.08 |
|---|---|
| 시베리안 허숙희의 자바스크립트 비기닝 10 (배열 Array) (7) | 2023.06.07 |
| 시베리안 허숙희의 자바스크립트 비기닝 8 (연산자) (0) | 2023.06.05 |
| 시베리안 허숙희의 자바스크립트 비기닝 7 (함수 function) (0) | 2023.06.03 |
| 시베리안 허숙희의 자바스크립트 비기닝 6 (반복문) (0) | 2023.06.03 |
