자바스크립트 문자열 다루기, 형변화, 검사

자바스크립트 문자열 : 문자열 다루기, 문자열 검사, 형변환

by

들어가며

기초 알고리즘을 자바스크립트로 풀면서 알게 된 내용들을 정리해 보았습니다. 파이썬 문자열을 꽤 다루어 보았음에도 “자바스크립트 문자열”을 다뤄보니 여간 헷갈리는 게 아니네요….

문자열 다루는 것이나 형변환은 유사한 데 자료형 검사 부분이 파이썬과 많이 달라 유독 고생을 했던 것 같습니다

고생하면서 정리한 내용이지만 문자열의 모든 부분을 커버하지는 못할 수 있어서 해당 부분은 차후 포스팅 하도록 하겠습니다.

자바스크립트 문자열 다루기

대소문자 변경

toUpperCase() 및 toLowerCase() 메소드를 사용하여 문자열의 대소문자를 변경할 수 있습니다.

let originalString = "Hello, World!";

// 대문자로 변환
let upperCaseString = originalString.toUpperCase();
console.log(upperCaseString);  // HELLO, WORLD!

// 소문자로 변환
let lowerCaseString = originalString.toLowerCase();
console.log(lowerCaseString);  // hello, world!

문자열 교체 : replace()

특정 하위 문자열을 다른 하위 문자열로 바꾸려면 replace() 메서드를 사용하세요.

let originalString = "Hello, World!";

// Replace 'Hello' with 'Hi'
let modifiedString = originalString.replace('Hello', 'Hi');
console.log(modifiedString);

모든 문자 항목을 전체적으로 바꾸려면 정규표현식에서 전역(g) 플래그를 사용해서 해결 할 수 있습니다.

정규표현식을 사용하기 위해서는 꽤나 많은 것을 정리해야 하기 때문에 이번 글에서는 간단한 예제만 가져왔습니다.

정규표현식을 사용해서 문자열 바꾸기

정규 표현식을 사용하지 않는다면 여러 문자열 중 맨 앞의 문자열만 교체를 하고 중단됩니다. 모든 문자열을 바꾸고 싶다면 정규표현식을 사용할 수 있습니다.

let originalString = "apple apple apple";
let modifiedString = originalString.replace("apple", "orange");

console.log(modifiedString);  // Output: "orange apple apple"

정규표현식을 사용하기 위해 /을 사용하고 전역 플래그인 ‘g’를 사용하면 아래와 같이 모든 문자열을 교체할 수 있습니다.

let originalString = "apple apple apple";
let modifiedString = originalString.replace(/apple/g, "orange");

console.log(modifiedString);  // Output: "orange orange orange"

전체 문자열 교체 : replaceAll()

물론 정규표현식을 사용하지 않고 문자열 전체에서 문자열 교체를 실시 할 수 있습니다.

ECMAScript 2021(ES12)부터 JavaScript는 문자열에 대한 replaceAll 메서드를 도입했습니다. 이 메서드는 정규식이 필요 없이 전역 교체를 단순화합니다.

let originalString = "apple apple apple";
let modifiedString = originalString.replaceAll("apple", "orange");

console.log(modifiedString);  // Output: "orange orange orange"

템플릿 리터럴 : ${}

템플릿 리터럴은 백틱(`)과 ${} 을 사용하여 변수를 넣을 수 있습니다.

let name = "John";
let age = 30;

// Using template literals
let formattedString = `Hello, my name is ${name} and I'm ${age} years old.`;

console.log(formattedString);
// Output: "Hello, my name is John and I'm 30 years old."

파이썬의 f-string과 다르게 작음 따옴표나 쌍 따옴표와 달리, 백틱 (`)을 사용해야만 템플릿 리터럴을 사용할 수 있음에 유의해야 합니다.

var = 'test'
string = f'{var} 앞에 아무거나 넣을 수 있음'

문자열 연결 : concat(), +

‘+’ 연산자나 concat() 메서드를 사용하여 문자열을 연결합니다.

let greeting = "Hello";
let name = "John";

// Concatenation using +
let message1 = greeting + ", " + name + "!";

// Concatenation using concat()
let message2 = greeting.concat(", ", name, "!");

하위 문자열 추출 : substring(), slice()

substring() 또는 slice()를 사용하여 문자열의 일부를 추출합니다.

let originalString = "Hello, World!";

// 인덱스 0부터 4까지
let substring1 = originalString.substring(0, 5);

// 인덱스 5부터 끝까지
let substring2 = originalString.substring(5);
//, World!

// 인덱스 0부터 4까지
let substring4 = originalString.slice(0, 5);
// World!

// 인덱스 5부터 끝까지
let substring4 = originalString.slice(5);
//, World!

공백 제거 : trim()

앞뒤 공백을 제거하려면 trim()을 사용하세요.

let stringWithWhitespace = "    Trim Me    ";
let trimmedString = stringWithWhitespace.trim();
console.log(trimmedString)  // Trim Me

앞 뒤 공백만 제거한다는 점에 유의 합니다.

파이썬의 경우 strip(), lstrip(), rstrip()으로 간단하게 원하는 쪽의 공백을 제거 할 수 있습니다.

반면 js에서는 replace() 함수와 정규표현식을 써야만 앞 뒤 공백을 제거할 수 있는 불편함이 존재합니다.

왼쪽 공백 제거

const str = "   Hello, World!   ";
const trimmedLeftStr = str.replace(/^\s+/, '');

console.log(trimmedLeftStr); // Output: "Hello, World!   "

^\s+는 문자열의 시작 부분(^)에 있는 하나 이상의 공백 문자(\s)와 일치하고 replace()는 이를 제거합니다.

오른쪽 공백 제거

const str = "   Hello, World!   ";
const trimmedRightStr = str.replace(/\s+$/, '');

console.log(trimmedRightStr); // Output: "   Hello, World!"

\s+$는 문자열 끝($)에 있는 하나 이상의 공백 문자(\s)와 일치하고 replace()는 이를 제거합니다.

문자열 포함 확인 : includes()

includes() 메서드는 호출 문자열에 지정된 하위 문자열이 포함되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

let mainString = "Hello, World!";
let subString = "World";

if (mainString.includes(subString)) {
  console.log("Substring is included in the main string.");
} else {
  console.log("Substring is not included in the main string.");
}

문자열 인덱스 확인 : indexOf()

indexOf() 메서드는 문자열에서 지정된 하위 문자열이 처음 나타나는 인덱스를 반환합니다.

하위 문자열을 찾을 수 없으면 -1을 반환함에 유의해야 합니다.

let mainString = "Hello, World!";
let subString = "World";

if (mainString.indexOf(subString) !== -1) {
  console.log("Substring is included in the main string.");
} else {
  console.log("Substring is not included in the main string.");
}

문자열 시작,끝 검사

문자열이 다른 문자열로 시작하거나 끝나는지 확인하려면 startsWith() 및 endsWith()를 사용할 수 있습니다.

const str = "Hello, World!";

// startsWith()를 사용하여 문자열이 "Hello"로 시작하는지 확인합니다.
const startsWithHello = str.startsWith("Hello");
console.log(startsWithHello); // true

// endsWith()를 사용하여 문자열이 "World!"로 끝나는지 확인합니다.
const endsWithWorld = str.endsWith("World!");
console.log(endsWithWorld); // true

이 예제에서 startsWith()는 문자열이 지정된 부분 문자열 “Hello”로 시작하는지 확인하고, endsWith()는 문자열이 지정된 부분 문자열 “World!”로 끝나는지 확인합니다.

두 함수 모두 조건이 충족되는지 여부를 나타내는 부울 값(true 또는 false)을 반환합니다.

문자열 자료형 검사

자료형 검사 : typeof()

typeof’ 연산자는 피연산자의 데이터 유형을 나타내는 문자열을 반환합니다. 일반적인 반환 값은 다음과 같습니다.

  • "undefined": 피연산자가 정의되지 않은 경우.
  • "boolean": 피연산자가 부울 값인 경우.
  • "number": 피연산자가 숫자인 경우.
  • "string": 피연산자가 문자열인 경우.
  • "symbol": 피연산자가 기호인 경우.
  • "object": 피연산자가 객체인 경우(null 제외).
  • "function": 피연산자가 함수인 경우.
typeof operand
typeof 42;                // "number"
typeof 42.3213            // "number"
typeof "42";              // "string"
typeof "hello";           // "string"
typeof true;              // "boolean"
typeof undefined;         // "undefined"
typeof null;              // "object" (historical quirk, null is not actually an object)
typeof {};                // "object"
typeof [];                // "object" (arrays are objects)
typeof function() {};     // "function"
typeof Symbol('example'); // "symbol"

"object"를 반환하는 typeof null은 JavaScript 역사의 특이한 현상이며 기술적으로 올바르지 않다는 점을 명심하세요. 또한 typeof는 다양한 유형의 객체(예: 배열, 객체, 함수)를 구별하지 않습니다.

NaN 검사1 : isNaN()

‘isNaN()’ 함수를 사용하여 값이 NaN(Not-a-Number)인지 여부를 확인합니다.

숫자가 아닌 문자열에 isNaN()을 사용할 때는 예상치 못한 결과가 발생할 수 있으므로 주의하세요.

엄격한 유형 검사를 수행하고 NaN인 ‘number’ 유형의 값에 대해서만 ‘true’를 반환하는 ES6에 도입된 ‘Number.isNaN()’과 같은 다른 메서드를 사용하는 것이 더 나은 경우가 많습니다.

// 숫자인 경우
isNaN(123);         // false
isNaN('123');       // false

// 문자인 경우
isNaN('hello');     // true

// 유의해야 하는 경우
isNaN('');          // false (can be converted to 0)
isNaN(null);        // false (treated as 0)
isNaN(true);        // false (converted to 1)
isNaN(undefined);   // true
isNaN(NaN);         // true

NaN 검사2 : Number.isNaN()

테스트하기 전에 숫자가 아닌 값을 숫자로 변환하지 않습니다.
값이 NaN인지 확인하는 데 isNaN()보다 선호됩니다.

Number.isNaN('abc');    // false (does not convert 'abc' to NaN)
Number.isNaN('123');    // false (does not convert '123' to 123)
Number.isNaN(123);      // false
Number.isNaN(NaN);      // true

Number.isFinite() 함수

값이 NaN 및 무한대를 제외한 유한수인지 확인합니다. 값이 유한한 숫자이면 ‘true’를 반환하고, 그렇지 않으면 ‘false’를 반환합니다.

Number.isFinite(value)

Number.isFinite() 함수는 부울 값을 반환합니다. 값이 유한수(NaN, Infinity 또는 -Infinity 아님)이면 ‘true’, 그렇지 않으면 ‘false’입니다.

Number.isFinite(42);        // true
Number.isFinite(-123.45);   // true
Number.isFinite(0);         // true
Number.isFinite(NaN);       // false
Number.isFinite(Infinity);  // false
Number.isFinite(-Infinity); // false
Number.isFinite('42');      // false (string representation of a number)
Number.isFinite(null);      // false (not a number)
Number.isFinite(undefined); // false (not a number)
Number.isFinite(true);      // false (not a number)
Number.isFinite({});        // false (not a number)
Number.isFinite([]);        // false (not a number)

문자열 자료형 변환

문자열 -> 숫자 형변환

단항 더하기 연산자(+) 사용

  • 단항 더하기 연산자는 피연산자를 숫자로 변환합니다.
let str = "42";
let num = +str;   // Convert string to number

parseInt() 및 parseFloat() 함수 사용

  • parseInt(): 문자열을 정수로 변환합니다.
  • parseFloat(): 문자열을 부동 소수점 숫자로 변환합니다.
let str = "42";
let num = parseInt(str);     // Convert string to integer
let floatNum = parseFloat("3.14");  // Convert string to float

Number() 생성자 사용

  • Number() 생성자를 사용하여 문자열을 숫자로 변환할 수 있습니다
let str = "42";
let num = Number(str);  // Convert string to number

숫자 -> 문자열 형변환

toString() 메소드 사용합니다. 숫자를 문자열로 변환하려면 숫자 객체의 toString() 메서드를 사용하면 됩니다.

let num = 42;
let str = num.toString();   // Convert number to string

템플릿 리터럴을 사용할 수도 있습니다.

let num = 42;
let str = `${num}`;   // Convert number to string

문자열 -> 배열 형변환

split() 함수를 사용하면 됩니다. 인자를 기준으로 문자열을 쪼개서 배열에 넣어 줍니다.

캐릭터 단위로 쪼개서 배열로 넣고 싶으면 ”를 인자로 넣어 줍니다.

let str = "I am Groot!"
let arr = str.split('')
console.log(arr)  // ['I', ' ', 'a', 'm',' ', 'G', 'r', 'o','o', 't', '!']

파이썬과 달리 인자를 꼭 전달해야 함에 유의해야 합니다.

let str = "I am Groot!"
let arr = str.split()
console.log(arr)  // [ 'I am Groot!' ]

배열 -> 문자열 형변환

join() 함수를 사용하면 됩니다. 인자를 배열 요소 사이사이에 넣어주면서 문자열로 변환 합니다.

“”을 인자로 넣으면 배열 구성 그대로 문자열로 만들어 줍니다.

let arr = ["I", " ", "a", "m", " ", "G", "r", "o", "o", "t", "!"];
let str = arr.join("");
console.log(str); // I am Groot!

join()의 인자로 다른 값을 넣어주면 해당 값을 배열의 요소 사이사이에 넣어서 문자열로 만들어 줍니다.

let arr = ["I", " ", "a", "m", " ", "G", "r", "o", "o", "t", "!"];
let str = arr.join("+");
console.log(str); // I+ +a+m+ +G+r+o+o+t+!

파이썬과 달리 인자를 꼭 전달해야 함에 유의해야 합니다.

let arr = ["I", " ", "a", "m", " ", "G", "r", "o", "o", "t", "!"];
let str = arr.join();
console.log(str); // I, ,a,m, ,G,r,o,o,t,!

마치며

자바스크립트에서 공백을 제거하거나 문자열로 표현된 숫자를 파악하는 데(해당 포스트에서는 안 다룸)에 정규표현식이 꼭 들어갑니다.

정규표현식 속도 느리다고 해서 버릴려고 했는데… 자바스크립트에서 없으면 많이 불편 할 것 같습니다~!

자바스크립트에서는 정규표현식을 어떻게 사용하는지도 공부해봐야 겠습니다.

참고하면 좋은 글

자바스크립트 함수
자바스크립트는 신기하게도 “함수”를 선언하는 방법이 여러가지가 있습니다. 그리고 함수 선언 방법에 따라 독특한 특징도 있습니다… Read more
파이썬 문자열 함수 : f-string, count(), find(), replace(), join(), index()
f-string : 파이썬 문자열 포맷팅 문자열 안에서 변수 값을 간편하게 삽입할 수 있습니다. f-string은 문자열 앞에 f를 붙여서 사용합니다. 중괄호 {} 안에 변수나 표현식을 넣어 해당 값을 문자열에 삽입합니다. .. Read more
파이썬 자료형 검사 : type(), isinstance(), isnumeric(), isdigit()…
입력 받은 값, 혹은 전달 받은 값이 어떤 자료형 인지 검사할 때가 있습니다.파이썬 자료형 검사 함수들에는 type(), isinstance(), isdigit(), isnumeric() 등이 있는데요…

Leave a Comment

Content

→ 목차