> 문자열 만들기와 사용 방법
▶︎ 문자열 만들기
-
''(따옴표),""(쌍따옴표),``(역따옴표) 안에 모든 종류의 문자(abc, 가나다, أهلا, 123, こんにちは, 👻 등등)를 넣어 문자열을 완성할 수 있다.- 따옴표는 내가 만든 값이 문자열이라는 것을 컴퓨터에게 알려주는 기호일 뿐
- 결과물에는 포함되어 출력되지 않는다.
console.log("굿바이 따옴표") // 굿바이 따옴표
▶︎ 문자열 사용 방법
-
alert("나는 pop-up이 될거야")와 같이 문자열 그 자체를 사용할 수도 있다. -
또한
let 문자열드루와 = "잇힝😆"처럼 보통 변수의 값으로 할당하여 가져와 쓴다.
> 문자열 다뤄보기
▶︎ 문자열끼리 합치기
- 연결하고 싶은 문자열 사이에
+연산자(operator)를 사용한다.+연산자는 결과에 포함되어 출력되지 않는다.(🤗 연산만 해주고 사라진다)console.log("고등" + "어"); // 고등어
- 공백을 포함하고 싶은 경우
- 공백만을 넣은 문자열을 넣어도 되고(
" ") - 문자열은 공백을 인식하기 때문에 기존 문자열에 공백을 넣을 수도 있다.(
" 내 앞에 공백있다.")
// 아래 두 가지 코드의 결과는 똑같다. console.log("너와!나의!" + " " + "연결!고리!"); // 너와!나의! 연결!고리! console.log("너와!나의!" + " 연결!고리!"); // 너와!나의! 연결!고리! - 공백만을 넣은 문자열을 넣어도 되고(
▶︎ 문자열을 변수에 담기
-
문자열을 비롯한 대부분의 데이터는 변수에 담겨(할당 되어) 값으로써 사용된다.
- 변수이름을 결정해서 선언하고(
let 변수리수리마수리) - 대입연산자
=를 넣어주고(let 변수리수리마수리 =) - 그 다음 마지막으로 문자열을 넣어준다(
let 변수리수리마수리 = "문자열")
- 변수이름을 결정해서 선언하고(
🤗 자료형을 변수에 할당하여 쓰는 공통되는 부분이니 반드시 익혀두자.
let 숫자형 = 0918; let 불린형 = true; let 함수 = function () { // ...코드쓰는곳 };
-
문자열을 변수에 할당하면 변수이름을 통해 문자열을 가져올 수 있다.
// 문자열을 변수에 넣음(할당, 대입) let 문자열대변인 = "문자열"; // 문자열을 할당한 변수를 불러옴(호출) console.log(문자열대변인); // 문자열 // 여러번 호출할 수도 있다. console.log(문자열대변인, 문자열대변인, 문자열대변인); // 문자열 문자열 문자열 // 변수명을 호출해서 다른 문자열과 합칠 수도 있다. let 문자열증인 = "그들은 합쳐집니다" console.log(문자열대변인 + " " + 문자열증인 + " 이렇게!"); // 문자열 그들은 합쳐집니다 이렇게!
▶︎ ``(역따옴표)의 특별한 기능
-
``(역따옴표, 백틱, backtick)은 다른 두 개의 따옴표에는 없는 기능을 가졌다. -
``안에서 문자열을 여러줄로 작성할 수 있다.let 백틱의묘미 = `오늘의 일기 예쁜여자: 저기요 너무 빛나셔서 그러는데.. 나: (헉..?!) 예쁜여자: 핸드폰..후렛쉬좀 꺼주셨으면 합니다. 나: 넵. `; // 정상적으로 출력된다! console.log(백틱의묘미); /* 오늘의 일기 예쁜여자: 저기요 너무 빛나셔서 그러는데.. 나: (헉..?!) 예쁜여자: 핸드폰..후렛쉬좀 꺼주셨으면 합니다. 나: 넵. */- 따옴표와 쌍따옴표는 여러줄로 쓰면 문법 에러가 발생한다.
let 야무진꿈 = "야! 나두!! "; console.log(야무진꿈); // Uncaught SyntaxError: Invalid or unexpected token- 하지만
\n(줄바꿈 특수문자)을 붙이면''와""도 여러줄로 출력 가능하다.let 이루어진꿈 = "야!\n나두!!"; console.log(이루어진꿈); /* 야! 나두!! */
- 하지만
- 따옴표와 쌍따옴표는 여러줄로 쓰면 문법 에러가 발생한다.
-
``으로 감싼 문자열 사이에 변수나 함수와 같은 표현식(값을 반환하는 식 or 코드)을 넣을 수 있다.``안에서 표현식을${}으로 감싸주면 된다.let 임진왜란발생년도 = 1592 // 변수를 `` 안에서 ${}로 감싼 후 원하는 문자열 사이에 위치시킨다. console.log(`임진왜란은 ${임진왜란발생년도}년에 발발하였습니다.`); // 임진외란은 1592년에 발발하였습니다.
▶︎ 문자형 vs 숫자형
-
문자형과 숫자형이 합쳐지면 어떻게 될까?
- 문자형 + 숫자형은 숫자형이 문자형으로 형 변환된 후 값 전부가 문자열이 되어 반환된다.
console.log("천사가내려온날: " + 0918); // 천사가내려온날: 918🤗 숫자열 맨 앞 0이 없어지고 반환되는 것을 보면 숫자형으로써 먼저 평가된 후에 문자열로 합쳐지는 것 같다. 그런데 이게 쓰이는 곳이 있을지는 미지수.
- 문자형 + 숫자형은 숫자형이 문자형으로 형 변환된 후 값 전부가 문자열이 되어 반환된다.
-
문자형에 숫자를 넣고 합치면 어떻게 될까?
- 문자형 안에 숫자 + 문자형 안에 숫자는 모두 문자형으로써 연산되어 하나의 문자형이 된다.(🤗 문자형 안에 숫자는 결국 문자형일 뿐)
console.log("20" + "21"); // 2021 - 문자형 안에 숫자 + 숫자형도 숫자형이 문자형으로 형 변환된 후 값 전부가 문자열이 되어 반환된다.
console.log("82" + 82); // 8282
- 문자형 안에 숫자 + 문자형 안에 숫자는 모두 문자형으로써 연산되어 하나의 문자형이 된다.(🤗 문자형 안에 숫자는 결국 문자형일 뿐)
문자형과 숫자형이 만나면 반환되는 자료형은 무조건 문자형이다.
▶︎ 문자열의 길이 구하기
-
문자열 그 자체나 문자열이 할당된 변수이름 뒤에
.length를 붙이면 해당 문자열의 총 길이(문자의 갯수)가 출력된다.(🤗 게시판 글자수 제한 등 여러곳에 쓰일것같다)// 띄어쓰기 까지 포함하여 12개의 문자열을 변수에 할당 let 문자열12개를내품안에 = "일이삼사 오육칠팔 구십"; // 문자열을 할당한 변수에 .length를 붙여보기 console.log(문자열12개를내품안에.length); // 12 // 문자열 그 자체에 .length를 붙여보기. console.log("일이삼사 오육칠팔 구십".length); // 12
❗️띄어쓰기도 문자 갯수에 포함 된다.
🌈 작은 회고 🤔
이번엔 벨로그를 쓰는 과정에 변화를 가져 보았다.
기존에는 학습관련 영상을 보면서 글을 작성 + 다른 추가자료를 통한 보강 까지 동시에 해 나가는 과정을 거쳤다.
이 방법의 장점은 주제들을 하나씩 초집중해서 접근할 수 있다는 것이었다.
하지만 그에 따라서 큰 단점들이 생겼는데
1) 흐름이 느려 지루해지기도 하고
2) 다음 목록들이 적혀있지 않으니 글을 쓰는데 필요한 대략적인 소요 시간이 전혀 예측되지 않고 일단 지금 당장 써내려가는 부분에만 너무 집중하게 되어서 나도 모르게 자연스럽게 단락단락 마다 매달려서 끝없이 파고들며 적당히 끊고 넘어가기가 어려웠다.
3) 따라서 전체적인 맥락을 받아들이기 좋지 않고 시간도 오래 걸렸다.
그래서 고안한 글쓰기 과정은 뼈대잡기와 살붙이기 과정으로 분리했다.
1) 큰 틀을 가르쳐주는 학습영상으로 대중소 타이틀 들의 단락들을 구분 + 다음 단계에서 채워 넣을 부분의 핵심 키워드로 구성된 짧은 문장과 코드 정도만 타이핑 하여 대강 구조적 초안을 만들면서 전체 흐름을 파악하고 마무리.(🤗 아무리 궁금해도 다른 자료를 보는 것은 절대절대절대! 금지하고 배운만큼과 아는만큼만 적는다.)
2) 다음으로 작성한 초안에 처음으로 돌아가 앞서 만들어놓은 구조에 다른 참고자료들을 보면서 키워드 내용 보강 + 영상에서 다루지 않은 관련 추가자료를 삽입한다.
결과는?
정리가 더 재미있고 무엇보다 마음이 편했다.
글쓰는 시간이 줄었는지는 잘 모르겠지만 피로도나 부담감은 줄었다.
사적인 일들과 나태함 때문에 시간을 많이 뺏겨서
일단 회고는 급 마무리!
++ 당분간 carbon은 사용하지 않기로 했다.
코드가 예쁘게 나와서 쓴건데
다른 사람이 곧바로 코드를 복사해서 테스트해 볼 수 없어서
나중에 예시 코드의 길이가 길어질수록 마이너스 효과가 더 클 것 같아서이다.
(🤗 물론 코드를 직접 타이핑 하는 것을 추천해드리고 싶다)
그리고 주석의 색도 너무 어두운데 custom이 되지 않는것도 마음에 안들었다.
