최 호민

최 호민

1677673560

JavaScript에서 문자열 또는 하위 문자열을 바꾸는 방법

JavaScript의 replace() 메서드를 사용하여 JS에서 문자열 또는 하위 문자열을 바꾸는 방법을 알아보세요. JavaScript에서 replace() 메서드를 사용하는 방법을 알아보세요.

JavaScript로 작업할 때 문자열 또는 하위 문자열을 새 문자열로 바꿔야 할 수 있습니다.

예를 들어, 특정 문자열(예: "color" - 미국 영어) 또는 더 큰 텍스트 또는 문서의 하위 문자열을 다른 문자열("colour" - 영국 영어)로 바꿀 수 있습니다. 또한 특정 문자 또는 프로그램이 작동하는지 확인하기 위해 문자열의 기호.

replace()이 기사에서는 JavaScript의 메소드를 사용하여 문자열 또는 하위 문자열을 대체하는 방법 을 배웁니다 .

문자열 또는 하위 문자열을 메서드 로 바꾸는 방법replace()

JavaScript에서 replace()메서드를 사용하여 문자열 또는 문자열의 하위 문자열을 바꿀 수 있습니다. 이 replace()메서드는 교체된 새 문자열을 반환합니다. 이 replace()메서드는 두 가지 인수를 사용합니다.

  1. 첫 번째 인수는 바꿀 문자열 또는 정규식입니다.
  2. 두 번째 인수는 일치하는 문자열 또는 정규식을 대체할 문자열입니다.
// Syntax
string.replace(searchValue, replaceValue)

위 구문에서 는 string교체를 수행하려는 문자열입니다. 매개 searchValue변수는 에서 검색하려는 문자열 또는 정규식입니다 string. 매개 replaceValue변수는 를 대체할 문자열입니다 searchValue.

JavaScript 문자열 replace()예제

미국 영어인 "color"를 사용하는 문자열이 있고 "color"의 모든 인스턴스를 영국식 영어 형식인 "color"로 변경하려고 한다고 가정합니다. 다음은 이를 수행할 수 있는 방법의 예입니다.

let originalString = "The color of the sky changes throughout the day, and sometimes the color of the clouds creates a beautiful contrast. The color of a flower can indicate its species, and the color of clothing can affect someone's mood.";

let newString = originalString.replace("color", "colour");

console.log(newString);

이렇게 하면 문자열에서 "color"의 모든 인스턴스가 대체되고 변수에 할당된 새 문자열이 반환됩니다 newString.

"The colour of the sky changes throughout the day, and sometimes the color of the clouds creates a beautiful contrast. The color of a flower can indicate its species, and the color of clothing can affect someone's mood."

메서드 로 여러 문자열 및 부분 문자열을 바꾸는 방법replace()

경우에 따라 하나의 문자열 변수에서 둘 이상의 문자열 또는 하위 문자열을 변경해야 할 수 있습니다. 예를 들어 아래 텍스트에서 "color"의 모든 인스턴스를 "color"로, "JS"를 "JavaScript"로 변경할 수 있습니다.

let originalString = "Using JS, you can change the color of a webpage's background, text, and elements, as well as create color animations and effects. The power of JS and color together is limitless."

replace()필요한 만큼 많은 메서드를 연결하여 이를 수행할 수 있습니다 .

let originalString =
    "Using JS, you can change the color of a webpage's background, text, and elements, as well as create color animations and effects. The power of JS and color together is limitless.";

let newString = originalString
    .replace("color", "colour")
    .replace("JS", "JavaScript");

console.log(newString);

이렇게 하면 두 인스턴스가 모두 교체된 새 문자열이 반환됩니다.

"Using JavaScript, you can change the colour of a webpage's background, text, and elements, as well as create color animations and effects. The power of JS and color together is limitless."

또한 여러 문자열이나 하위 문자열을 하나의 문자열로 바꿀 수도 있습니다. 예를 들어 where "quick", "fox" 및 "brown"을 하나의 문자열인 "hello"로 바꿀 수 있습니다.

let originalString = "The quick brown fox jumps over the lazy dog.";
let newString = originalString.replace(/quick|brown|fox/g, "hello");

console.log(newString); // Output: "The hello hello hello jumps over the lazy dog."

정규 표현식과 함께 사용하는 방법replace()

JavaScript에서 replace()정규식과 함께 메서드를 사용하여 문자열과 하위 문자열을 더 유연하고 강력하게 바꿀 수 있습니다. 예를 들어:

let originalString = "Today is a sunny day. I love sunny days!";
let newString = originalString.replace(/sunny/g, "cloudy");

console.log(newString); // Output: "Today is a cloudy day. I love cloudy days!"

이 예에서 정규식 /sunny/g은 originalString. 플래그 g는 모든 일치 항목을 교체해야 함을 지정합니다. 교체 문자열 "cloudy"는 일치하는 모든 하위 문자열을 교체하여 newString"오늘은 흐린 날입니다. 흐린 날이 좋아요!"가 됩니다.

정규식을 사용하여 패턴이나 문자 그룹을 일치시킬 수도 있습니다. 예를 들어:

let originalString = "My phone number is (123) 456-7890";
let newString = originalString.replace(/\D/g, "");

console.log(newString); // Output: "1234567890"

위의 이 예에서 정규식 /\D/g은 originalString. 문자 \D클래스는 숫자가 아닌 모든 문자와 일치합니다. 플래그 g는 모든 일치 항목을 교체해야 함을 지정합니다.

정규 표현식으로 대소문자 구분 교체

정규식을 사용하면 고급 검색 및 교체 작업을 수행할 수 있습니다. 예를 들어 i플래그를 사용하면 대소문자가 완벽하게 일치하는 문자열과 하위 문자열만 바꿀 수 있습니다.

const originalString = "I love JavaScript and javascript loves me";
const newString = originalString.replace(/JavaScript/i, "Python");

console.log(newString); // Output: "I love Python and javascript loves me"

이 예제에서 replace()메서드는 변수에서 "JavaScript"라는 단어의 첫 번째 항목을 "Python"으로 바꿉니다 originalString. 이 /i플래그는 대소문자를 구분하지 않는 검색을 수행하는 데 사용됩니다.

마무리

replace()이 문서에서는 JavaScript의 문자열 또는 하위 문자열을 해당 메서드 및 해당 메서드가 작동할 수 있는 다양한 인스턴스 로 대체하는 방법을 배웠습니다 replace().

이 기사를 통해 JavaScript에서 메소드를 사용하는 방법을 더 잘 이해할 수 있기를 바랍니다 replace().

즐거운 코딩하세요!

출처: https://www.freecodecamp.org

#javascript

What is GEEK

Buddha Community

JavaScript에서 문자열 또는 하위 문자열을 바꾸는 방법
최 호민

최 호민

1677673560

JavaScript에서 문자열 또는 하위 문자열을 바꾸는 방법

JavaScript의 replace() 메서드를 사용하여 JS에서 문자열 또는 하위 문자열을 바꾸는 방법을 알아보세요. JavaScript에서 replace() 메서드를 사용하는 방법을 알아보세요.

JavaScript로 작업할 때 문자열 또는 하위 문자열을 새 문자열로 바꿔야 할 수 있습니다.

예를 들어, 특정 문자열(예: "color" - 미국 영어) 또는 더 큰 텍스트 또는 문서의 하위 문자열을 다른 문자열("colour" - 영국 영어)로 바꿀 수 있습니다. 또한 특정 문자 또는 프로그램이 작동하는지 확인하기 위해 문자열의 기호.

replace()이 기사에서는 JavaScript의 메소드를 사용하여 문자열 또는 하위 문자열을 대체하는 방법 을 배웁니다 .

문자열 또는 하위 문자열을 메서드 로 바꾸는 방법replace()

JavaScript에서 replace()메서드를 사용하여 문자열 또는 문자열의 하위 문자열을 바꿀 수 있습니다. 이 replace()메서드는 교체된 새 문자열을 반환합니다. 이 replace()메서드는 두 가지 인수를 사용합니다.

  1. 첫 번째 인수는 바꿀 문자열 또는 정규식입니다.
  2. 두 번째 인수는 일치하는 문자열 또는 정규식을 대체할 문자열입니다.
// Syntax
string.replace(searchValue, replaceValue)

위 구문에서 는 string교체를 수행하려는 문자열입니다. 매개 searchValue변수는 에서 검색하려는 문자열 또는 정규식입니다 string. 매개 replaceValue변수는 를 대체할 문자열입니다 searchValue.

JavaScript 문자열 replace()예제

미국 영어인 "color"를 사용하는 문자열이 있고 "color"의 모든 인스턴스를 영국식 영어 형식인 "color"로 변경하려고 한다고 가정합니다. 다음은 이를 수행할 수 있는 방법의 예입니다.

let originalString = "The color of the sky changes throughout the day, and sometimes the color of the clouds creates a beautiful contrast. The color of a flower can indicate its species, and the color of clothing can affect someone's mood.";

let newString = originalString.replace("color", "colour");

console.log(newString);

이렇게 하면 문자열에서 "color"의 모든 인스턴스가 대체되고 변수에 할당된 새 문자열이 반환됩니다 newString.

"The colour of the sky changes throughout the day, and sometimes the color of the clouds creates a beautiful contrast. The color of a flower can indicate its species, and the color of clothing can affect someone's mood."

메서드 로 여러 문자열 및 부분 문자열을 바꾸는 방법replace()

경우에 따라 하나의 문자열 변수에서 둘 이상의 문자열 또는 하위 문자열을 변경해야 할 수 있습니다. 예를 들어 아래 텍스트에서 "color"의 모든 인스턴스를 "color"로, "JS"를 "JavaScript"로 변경할 수 있습니다.

let originalString = "Using JS, you can change the color of a webpage's background, text, and elements, as well as create color animations and effects. The power of JS and color together is limitless."

replace()필요한 만큼 많은 메서드를 연결하여 이를 수행할 수 있습니다 .

let originalString =
    "Using JS, you can change the color of a webpage's background, text, and elements, as well as create color animations and effects. The power of JS and color together is limitless.";

let newString = originalString
    .replace("color", "colour")
    .replace("JS", "JavaScript");

console.log(newString);

이렇게 하면 두 인스턴스가 모두 교체된 새 문자열이 반환됩니다.

"Using JavaScript, you can change the colour of a webpage's background, text, and elements, as well as create color animations and effects. The power of JS and color together is limitless."

또한 여러 문자열이나 하위 문자열을 하나의 문자열로 바꿀 수도 있습니다. 예를 들어 where "quick", "fox" 및 "brown"을 하나의 문자열인 "hello"로 바꿀 수 있습니다.

let originalString = "The quick brown fox jumps over the lazy dog.";
let newString = originalString.replace(/quick|brown|fox/g, "hello");

console.log(newString); // Output: "The hello hello hello jumps over the lazy dog."

정규 표현식과 함께 사용하는 방법replace()

JavaScript에서 replace()정규식과 함께 메서드를 사용하여 문자열과 하위 문자열을 더 유연하고 강력하게 바꿀 수 있습니다. 예를 들어:

let originalString = "Today is a sunny day. I love sunny days!";
let newString = originalString.replace(/sunny/g, "cloudy");

console.log(newString); // Output: "Today is a cloudy day. I love cloudy days!"

이 예에서 정규식 /sunny/g은 originalString. 플래그 g는 모든 일치 항목을 교체해야 함을 지정합니다. 교체 문자열 "cloudy"는 일치하는 모든 하위 문자열을 교체하여 newString"오늘은 흐린 날입니다. 흐린 날이 좋아요!"가 됩니다.

정규식을 사용하여 패턴이나 문자 그룹을 일치시킬 수도 있습니다. 예를 들어:

let originalString = "My phone number is (123) 456-7890";
let newString = originalString.replace(/\D/g, "");

console.log(newString); // Output: "1234567890"

위의 이 예에서 정규식 /\D/g은 originalString. 문자 \D클래스는 숫자가 아닌 모든 문자와 일치합니다. 플래그 g는 모든 일치 항목을 교체해야 함을 지정합니다.

정규 표현식으로 대소문자 구분 교체

정규식을 사용하면 고급 검색 및 교체 작업을 수행할 수 있습니다. 예를 들어 i플래그를 사용하면 대소문자가 완벽하게 일치하는 문자열과 하위 문자열만 바꿀 수 있습니다.

const originalString = "I love JavaScript and javascript loves me";
const newString = originalString.replace(/JavaScript/i, "Python");

console.log(newString); // Output: "I love Python and javascript loves me"

이 예제에서 replace()메서드는 변수에서 "JavaScript"라는 단어의 첫 번째 항목을 "Python"으로 바꿉니다 originalString. 이 /i플래그는 대소문자를 구분하지 않는 검색을 수행하는 데 사용됩니다.

마무리

replace()이 문서에서는 JavaScript의 문자열 또는 하위 문자열을 해당 메서드 및 해당 메서드가 작동할 수 있는 다양한 인스턴스 로 대체하는 방법을 배웠습니다 replace().

이 기사를 통해 JavaScript에서 메소드를 사용하는 방법을 더 잘 이해할 수 있기를 바랍니다 replace().

즐거운 코딩하세요!

출처: https://www.freecodecamp.org

#javascript

최 호민

최 호민

1661960760

JavaScript에서 문자열을 숫자로 변환하는 6가지 방법

이 튜토리얼은 JavaScript에서 문자열을 숫자로 변환하는 6가지 방법을 보여줍니다. JavaScript에는 문자열을 숫자로 변환하거나 변환하는 다양한 내장 메서드가 있습니다. 

이 기사에서는 문자열을 숫자로 변환하는 데 사용할 수 있는 몇 가지 기본 제공 JavaScript 메서드와 JavaScript에서 문자열과 숫자가 작동하는 방식의 기본에 대한 소개(또는 복습!)를 배웁니다.

우리가 다룰 내용은 다음과 같습니다.

  1. JavaScript에서 문자열이란 무엇입니까?
  2. JavaScript에서 숫자는 무엇입니까?
  3. JavaScript에서 값의 데이터 유형을 확인하는 방법은 무엇입니까?
  4. parseInt()함수 를 사용하여 문자열을 숫자로 변환하는 방법
  5. parseFloat()함수 를 사용하여 문자열을 숫자로 변환하는 방법
  6. Number()함수 를 사용하여 문자열을 숫자로 변환하는 방법
  7. Math함수 를 사용하여 문자열을 숫자로 변환하는 방법
  8. 곱하고 다이빙하여 문자열을 숫자로 변환하는 방법1
  9. +단항 연산자 를 사용하여 문자열을 숫자로 변환하는 방법

JavaScript에서 문자열이란 무엇입니까?

문자열은 텍스트를 저장하고 조작하는 것과 같이 텍스트를 통해 통신하는 효과적인 방법입니다. 모든 프로그래밍 언어에서 가장 기본적인 데이터 유형 중 하나입니다.

JavaScript의 문자열은 기본 데이터 유형입니다. 이는 기본적으로 언어에 내장되어 있음을 의미합니다.

문자열은 0개 이상의 문자 값으로 구성된 순서화된 시퀀스입니다. 특히 문자, 숫자 또는 기호(예: 구두점)가 될 수 있는 하나 이상의 문자 시퀀스입니다.

일반적으로 데이터 값이 작은따옴표나 큰따옴표와 같이 따옴표로 묶인 경우 데이터 값이 문자열인지 알 수 있습니다.

특히 JavaScript에서 문자열을 생성하는 방법에는 세 가지가 있습니다.

  • 작은 따옴표를 사용하여.
  • 큰따옴표를 사용합니다.
  • 백틱을 사용하여.

작은 따옴표를 사용하여 문자열을 만드는 방법은 다음과 같습니다.

// string created using single quotes ('')
let favePhrase = 'Hello World!';

큰따옴표를 사용하여 문자열을 만드는 방법은 다음과 같습니다.

// string created using double quotes ("")
let favePhrase = "Hello World!";

역따옴표를 사용하여 문자열을 만드는 방법은 다음과 같습니다.

// string created using backticks (``)
let favePhrase = `Hello World!`;

JavaScript에서 문자열을 생성하는 마지막 방법은 템플릿 리터럴이라고도 합니다.

자바스크립트에서 숫자란?

숫자를 사용하면 숫자 값을 나타내고 수학 연산 및 계산을 수행할 수 있습니다.

JavaScript의 숫자는 문자열과 마찬가지로 원시 데이터 유형입니다.

다른 프로그래밍 언어와 달리 생성하려는 숫자 유형을 지정할 필요가 없습니다. 예를 들어 숫자가 정수인지 부동 소수점인지 언급할 필요가 없습니다.

JavaScript에는 언어에 내장된 몇 가지 다른 유형의 숫자(양수 및 음수)가 있습니다.

  • 정수. 정수는 반올림 또는 정수라고도 하는 소수 부분을 포함하지 않는 숫자 값입니다.
  • 수레. 부동 소수점은 소수점이 있는 숫자이며 소수점 뒤에 하나 이상의 숫자가 있습니다.
  • 지수 숫자는 정수 또는 부동 소수점이 될 수 있고 뒤에 e. 숫자에 주어진 거듭제곱을 e곱한 값을 나타냅니다 .10
  • 이진수(2진수라고도 함). 이진법은 두 개의 숫자로 구성된 숫자 시스템입니다: 0및 1. 8비트를 사용하여 1바이트를 나타냅니다. 숫자는 8비트 숫자로 시작하고 0뒤에 옵니다.b
  • 8진수(8진수라고도 함). 08진수 는 에서 범위의 8진수가 뒤따르는 8진수로 시작합니다 0 - 7.
  • 16진수(16진수라고도 함). 16진수 는 또는 로 시작하고 0그 뒤에 옵니다 . 그 이후에는 from 범위의 16진수 와 (또는 ) 범위의 문자 가 조합될 수 있습니다 . 문자 는 값과 연결됩니다 .xX0 - 9A - Fa - fA - F10 -15
// integer
let num = 47;

// float
let num = 47.32;

// exponential - to represent large numbers
let num = 477e2;  // equal to multiplying 477 to 10 to the power of 2 (or 100) which results in 47700

// exponential - to represent small numbers
let num = 477e-2;  // equal to dividing 477 to 10 to the power of 2 (or 100) which results in 4.77

// binary
let num = 0b1111;    // stands for 15

// octal
let num = 023; // stands for 19

// hexadecimal
let num = 0xFF; // stands for 255

알아야 할 것은 숫자 를 따옴표로 묶어서는 안 된다는 것입니다. 그러면 자동으로 문자열이 됩니다 .

// this is a string not a number!
let num = '7';

JavaScript에서 값의 데이터 유형을 확인하는 방법은 무엇입니까?

실수를 방지하고 JavaScript에서 값의 데이터 유형을 다시 확인하려면 typeof연산자를 사용하십시오.

앞서 인용 부호로 묶인 숫자는 문자열이라고 언급했습니다.

다음을 수행하여 직접 확인할 수 있습니다.

let num = '7';
console.log(typeof num)

// string

함수 를 사용하여 문자열을 숫자로 변환하는 방법parseInt()

parseInt()함수 의 일반 구문 은 다음과 같습니다.

parseInt(string, radix)

이 parseInt()함수는 두 개의 인수를 사용합니다. 첫 번째 인수로 문자열과 두 번째 선택적 인수로 기수입니다.

문자열은 숫자로 변환해야 하는 값입니다.

기수는 사용할 수학적 숫자 체계와 반환될 숫자의 밑수를 지정합니다. 숫자가 2진수(또는 2진수), 8진수(8진수), 10진수(10진수) 또는 10진수인지 여부 16(또는 16진수) 숫자입니다.

기수가 포함되지 않으면 10기본적으로 (십진수 값)입니다.

let num = '7';

let strToNum = parseInt(num, 10);

console.log(strToNum);
console.log(typeof strToNum);

// 7
// number

문자열에 문자와 숫자가 포함되어 있으면 어떻게 될까요? 문자열의 숫자만 반환합니다.

let num = '7 cats 7';

let strToNum = parseInt(num, 10);

console.log(strToNum);
console.log(typeof strToNum);

// 7
// number

숫자 가 parseInt()아닌 문자를 만나면 줄 아래에 숫자가 더 있더라도 해당 문자와 ​​그 뒤에 오는 모든 문자를 무시합니다.

명심해야 할 점은 문자열이 숫자로 시작 하지 않으면NaN (의 약자 Not a Number)가 대신 반환된다는 것입니다.

let num = 'h7';

let strToNum = parseInt(num, 10);

console.log(strToNum);

// NaN

parseInt()함수는 문자열의 위치에서 시작하여 해당 0위치의 문자를 숫자로 변환할 수 있는지 여부를 결정합니다. 그렇지 않으면 NaN나중에 문자열에 숫자가 포함되어 있어도 함수가 대신 반환합니다.

float를 포함하는 문자열이 있다면 어떻게 될까요? 이 parseInt()함수는 반올림하고 정수를 반환합니다.

let num = '7.77';

let strToNum = parseInt(num, 10);

console.log(strToNum);

// returns 7 instead of 7.77

이 경우 리터럴 변환을 수행하려는 경우 parseFloat()대신 함수를 사용하는 것이 가장 좋습니다.

함수 를 사용하여 문자열을 숫자로 변환하는 방법parseFloat()

parseFloat()함수 의 일반 구문 은 다음과 같습니다.

parseFloat(string)

함수 의 구문 및 동작은 parseFloat()함수의 구문과 유사합니다 parseInt(). 주요 차이점은 parseFloat()하나의 인수만 취하고 기수를 인수로 받아들이지 않는다는 것입니다.

이 parseFloat()함수는 문자열을 유일한 인수로 받아들이고 소수점이 있는 숫자인 float를 반환합니다.

parseFloat()숫자의 정수 부분이 아니라 소수 부분을 유지하려는 경우 이 기능을 사용합니다 .

이전 섹션에서 동일한 예제를 사용하여 다음을 사용하여 다시 작성하는 방법은 parseFloat()다음과 같습니다.

let num = '7.77';

let strToNum = parseFloat(num);

console.log(strToNum);

// 7.77

와 마찬가지로 parseInt()이 parseFloat()함수는 첫 번째 숫자만 반환하고 숫자가 아닌 문자는 무시합니다.

let num = '7.77 cats 7.77';

let strToNum = parseFloat(num);

console.log(strToNum);

// 7.77

그리고 다시 마찬가지로 parseInt(), 첫 번째 문자가 유효한 숫자가 아닌 경우 parseFloat()함수는 NaN숫자로 변환할 수 없으므로 숫자 대신 반환합니다.

let num = 'h7.77';

let strToNum = parseFloat(num);

console.log(strToNum);

// NaN

함수 를 사용하여 문자열을 숫자로 변환하는 방법Number()

Number()함수 의 일반 구문 은 다음과 같습니다.

Number(string)

Number()함수와 parseInt()and 함수 의 차이점은 함수가 전체 문자열을 한 번에 숫자로 변환하려고 parseFloat()한다는 사실입니다 . Number()구문 분석 메서드는 문자열을 조각 단위로 숫자로 변환하고 문자열을 구성하는 문자를 한 번에 하나씩 개별적으로 이동합니다.

앞에서 본 다음과 같은 예를 살펴보겠습니다 parseInt().

let num = '7 cats 7';

let strToNum = parseInt(num, 10);

console.log(strToNum);

// 7

숫자가 아닌 문자 를 parseInt()만나면 변환이 종료됩니다.

다음은 동일한 예제가 Number()함수에서 작동하는 방식입니다.

let num = '7 cats 7';

let strToNum = Number(num);

console.log(strToNum);

// NaN

Number()전체 문자열을 한 번에 숫자로 변환하고 형변환하려고 시도하기 때문에 NaN숫자가 아닌 문자를 만나 숫자로 변환할 수 없기 때문에 반환됩니다.

이 Number()함수는 문자열에 숫자가 아닌 문자가 포함된 경우 변환이 실패하도록 하려는 경우에 적합합니다.

주목해야 할 또 다른 사항은 앞에서 본 함수 Number()와 달리 십진수를 만나면 함수가 정수를 반환하지 않는다는 것입니다.parseInt()

let num = '7.77';

let strToNum = Number(num);

console.log(strToNum);

// 7.77

함수 를 사용하여 문자열을 숫자로 변환하는 방법Math

객체 는 Math내장 JavaScript 객체입니다. Math.round()그리고 , Math.floor(), 와 같은 메소드를 사용하여 Math.ceil()문자열을 숫자로 변환할 수 있습니다.

유형 변환을 위해 Math 메서드를 사용할 때 염두에 두어야 할 사항은 부동 소수점으로 작업할 때 부동 소수점이 정수로 바뀌고 부동 소수점이 소수점 부분을 잃게 된다는 것입니다.

메서드는 문자열을 가장 가까운 정수로 변환합니다.

이 Math.round()함수는 문자열을 숫자로 변환하고 가장 가까운 정수로 반올림합니다.

let num = '7.5';

let strToNum = Math.round(num);

console.log(strToNum);

// 8

값 num이 같으면 7.4다음과 같은 결과를 얻습니다.

let num = '7.4';

let strToNum = Math.round(num);

console.log(strToNum);

// 7

문자열에 숫자가 아닌 문자가 포함되어 있으면 를 Math.round()반환합니다 NaN.

let num = '7.5a';

let strToNum = Math.round(num);

console.log(strToNum);

// NaN

이 Math.floor()함수는 문자열을 숫자로 변환하고 가장 가까운 정수 로 내림 합니다.

let num = '7.87';

let strToNum = Math.floor(num);

console.log(strToNum);

// 7

문자열에 숫자가 아닌 문자가 포함되어 있으면 를 Math.floor()반환합니다 NaN. 이 함수가 작동하는 방식은 전체 문자열을 숫자로 변환한 다음 결과를 평가하는 것입니다. 즉, 문자열이 작동하려면 유효한 문자열이어야 합니다.

let num = '7.87a';

let strToNum = Math.floor(num);

console.log(strToNum);

// NaN

이 Math.ceil()함수는 Math.floor()문자열을 숫자로 변환하고 가장 가까운 정수로 반올림 하기 때문에 반대입니다.

let num = '7.87';

let strToNum = Math.ceil(num);

console.log(strToNum);

// 8

이전 예와 유사하게, Math.ceil()함수는 NaN문자열에서 숫자가 아닌 값을 만나면 반환합니다:

let num = '7.87a';

let strToNum = Math.ceil(num);

console.log(strToNum);

// NaN

곱셈과 나눗셈으로 문자열을 숫자로 변환하는 방법1

곱하기 1는 문자열을 숫자로 변환하는 가장 빠른 방법 중 하나입니다.

let convertStringToInt = "7" * 1;

console.log(convertStringToInt);
console.log(typeof convertStringToInt);

// 7
// number

그리고 float에서 유형 변환을 수행하려면 곱 1하면 소수점 이하 자릿수가 예약됩니다.

let convertStringToInt = "7.1" * 1;

console.log(convertStringToInt);
console.log(typeof convertStringToInt);

// 7.1
// number

문자열에 숫자가 아닌 문자가 포함되어 있으면 다음을 반환합니다 NaN.

let convertStringToInt = "7a" * 1;

console.log(convertStringToInt);

// NaN

1문자열을 정수로 변환하는 이 방법은 문자열을 다음 으로 나눌 때도 작동합니다 .

let convertStringToInt = "7" / 1

console.log(convertStringToInt);
console.log(typeof(convertStringToInt));

// 7
// number

이 시점에서 1문자열에 추가하여 정수로 변환하려고 할 때 어떤 일이 발생하는지 언급할 가치가 있습니다. 그렇게 하려고 하면 다음과 같은 결과를 얻을 수 있습니다.

let convertStringToInt = "7" + 1;

console.log(convertStringToInt);
console.log(typeof convertStringToInt);

// 71
// string

위의 예에서 1은 문자열과 연결되어 문자열 "7"과 나란히 배치되었음을 의미합니다.

단항 연산자 를 사용하여 문자열을 숫자로 변환하는 방법+

단항 +연산자를 사용하는 것도 문자열을 숫자로 변환하는 가장 빠른 방법 중 하나입니다.

더하기 연산자 , +를 문자열 앞에 배치하면 문자열이 정수로 변환됩니다.

let convertStringToInt = +"7";

console.log(convertStringToInt);
console.log(typeof convertStringToInt);

// 7
// number

.. 또는 부동 소수점:

let convertStringToInt = +"7.77";

console.log(convertStringToInt);

// 7.77

+문자열을 숫자로 변환하는 다른 방법과 유사하게 전체 문자열에는 단항 연산자가 작동 하는 숫자 문자만 포함되어야 합니다 . 문자열이 숫자를 나타내지 않으면 다음을 반환합니다 NaN.

let convertStringToInt = +"7a";

console.log(convertStringToInt);

// NaN

결론

그리고 당신은 그것을 가지고 있습니다! 이제 JavaScript에서 문자열을 숫자로 변환하는 몇 가지 방법을 알게 되었습니다.

https://www.freecodecamp.org 의 원본 ​​기사 출처

#javascript #js 

최 호민

최 호민

1678878780

JavaScript에서 배열을 정렬하는 방법

이 자습서에서는 JavaScript에서 배열을 정렬하는 방법을 배웁니다. JavaScript Array sort() 메서드의 작동 방식. JavaScript sort() 메서드의 단점과 정확한 정렬 방법

프로그래밍에서는 데이터를 정렬해야 하는 상황이 항상 발생합니다. 데이터를 정렬할 때 정확한 결과를 얻지 못하면 코드 내에서 오작동이나 버그가 발생할 수 있으므로 항상 정확한 결과를 원할 것입니다.

목차:

  • JavaScript 배열 sort()방법의 작동 방식
  • JavaScript sort() 메서드의 단점과 정확하게 정렬하는 방법
    • JavaScript에서 숫자를 정확하게 정렬하는 방법
    • 문자열을 정확하게 정렬하는 방법
    • 정렬할 때 원래 배열을 수정하지 않는 방법
  • 마무리

sort()이 기사에서는 JavaScript에서 배열을 정렬하는 방법, 방법과 관련된 몇 가지 단점 및 보다 정확한 결과를 얻는 방법을 배웁니다 .

급할 경우 배열을 정확하게 정렬하는 가장 좋은 방법은 비교 기능을 사용하는 것입니다. 메서드 에 비교 함수를 전달해야 합니다 sort(). 이 기사에서 더 잘 설명하겠지만 다음은 예입니다.

const numbersArr = [3, 10, 4, 21, 5, 9, 2, 6, 5, 3, 5];

// Ascending Order
numbersArr.sort((a, b) => a - b);
console.log(numbersArr); // Output: [2,3,3,4,5,5,5,6,9,10,21]

// Descending Order
numbersArr.sort((a, b) => b - a);
console.log(numbersArr); // Output: [21,10,9,6,5,5,5,4,3,3,2]

급하지 않다면 이 오작동의 원인이 무엇인지 방법 sort()과 문제를 해결하는 다양한 방법으로 이해합시다.

JavaScript 배열 sort()방법의 작동 방식

이 sort()메서드는 기본적으로 유니코드 문자 코드 값을 기준으로 오름차순으로 배열의 요소를 정렬하는 데 사용할 수 있습니다.

유니코드 문자 코드 값을 기준으로 정렬하는 방법을 살펴보기 전에 몇 가지 예를 살펴보겠습니다.

let numArray = [3, 4, 1, 7, 2];
let sortedArr = numArray.sort();
console.log(sortedArr); // Output: [1,2,3,4,7]

sort()메소드를 배열에 적용하면 원래 배열의 요소 위치가 변경된다는 사실을 아는 것도 중요합니다 . 즉, 정렬된 배열에 새 변수를 할당할 필요가 없습니다.

let numArray = [3, 4, 1, 7, 2];
numArray.sort();
console.log(numArray); // Output: [1,2,3,4,7]

배열 자체에 메서드를 적용할 수도 있습니다.

let numArray = [3, 4, 1, 7, 2].sort();
console.log(numArray); // Output: [1,2,3,4,7]

그러나 이것은 이 기사의 전부와 거리가 멀다. 메서드 sort()는 배열의 요소를 문자열로 변환한 다음 해당 유니코드 코드 포인트를 비교하여 비교합니다. 이는 일부 상황에서 정렬이 실제로 잘못될 수 있음을 의미합니다.

let numArray = [3, 10, 4, 21, 5, 9, 2, 6, 5, 3, 5].sort();
console.log(numArray); // Output: [10,2,21,3,3,4,5,5,5,6,9]

10이 2 보다 먼저 , 21이 3 보다 먼저 오는 것을 알 수 있습니다 .

JavaScript sort() 메서드의 단점과 정확하게 정렬하는 방법

sort()이제 방법의 몇 가지 단점과 해결 방법을 살펴보겠습니다 . 이러한 단점과 이를 해결하는 방법을 이해하면 우위를 점하고 일부 버그를 피하는 데 도움이 됩니다.

JavaScript에서 숫자를 정확하게 정렬하는 방법

JavaScript의 방법 sort()은 배열의 요소를 문자열로 변환한 다음 해당 유니코드 코드 포인트를 비교하여 비교합니다.

10, 5, 80이 5, 10, 80 대신 10, 5, 80으로 정렬되는 예에서 볼 수 있듯이 숫자 배열을 정렬할 때 예기치 않은 결과가 발생할 수 있습니다.

let numArr = [10, 5, 80].sort();
console.log(numArr); // Output: [10, 5, 80]

이러한 단점을 해결하기 위해 원하는 정렬 순서를 정의하는 비교 기능을 제공할 수 있습니다.

숫자 배열을 정렬하려면 비교 함수가 첫 번째 숫자에서 두 번째 숫자를 빼야 합니다.

첫 번째 숫자가 두 번째 숫자보다 작으면 음수, 첫 번째 숫자가 두 번째 숫자보다 크면 양수, 두 숫자가 같으면 0이 됩니다.

예를 들면 다음과 같습니다.

let numArr = [10, 5, 80];

numArr.sort((a, b) => a - b);
console.log(numArr); // Output: [5, 10, 80]

올바른 정렬 순서를 정의하는 비교 기능을 제공함으로써 배열이 정확하게 정렬되었는지 확인할 수 있습니다.

두 번째 숫자에서 첫 번째 숫자를 빼서 배열 요소를 내림차순으로 정렬할 수도 있습니다.

let numArr = [10, 5, 80];

numArr.sort((a, b) => b - a);
console.log(numArr); // Output: [80, 10, 5]

문자열을 정확하게 정렬하는 방법

이 sort()메서드는 문자열 배열을 정렬하는 데에도 사용할 수 있지만 모든 경우에 정렬 순서가 정확하지 않을 수 있습니다.

예를 들어 문자열 "a", "A" 및 "b"는 "a", "A", "b" 대신 "A", "a", "b"로 정렬됩니다. A"는 소문자 "a"보다 유니코드 코드 포인트가 낮습니다.

let stringsArr = ["a", "A", "b"].sort();
console.log(stringsArr); // Output: ["A","a","b"]

이러한 단점을 해결하기 위해 원하는 정렬 순서를 정의하는 비교 기능을 제공할 수 있습니다.

대소문자를 구분하지 않는 알파벳 순서로 문자열 배열을 정렬하려면 비교 함수는 메서드를 사용하여 두 문자열을 모두 소문자로 변환한 toLowerCase()다음 <및 >연산자를 사용하여 비교해야 합니다.

예를 들면 다음과 같습니다.

let stringsArr = ["a", "A", "b"];

stringsArr.sort((a, b) => a.toLowerCase() < b.toLowerCase() ? -1 : 1);
console.log(stringsArr); // Output: ["a", "A", "b"]

올바른 정렬 순서를 정의하는 비교 기능을 제공함으로써 문자열 배열이 정확하게 정렬되었는지 확인할 수 있습니다.

-1및 의 값을 번갈아 가며 반대 순서로 정렬할 수 있습니다 1.

let stringsArr = ["a", "A", "b"];

stringsArr.sort((a, b) => a.toLowerCase() < b.toLowerCase() ? 1 : -1);
console.log(stringsArr); // Output: ["b", "A", "a"]

정렬할 때 원래 배열을 수정하지 않는 방법

이 방법의 단점 중 하나는 sort()요소를 제자리에 정렬한다는 것입니다. 즉, 원래 배열을 수정한다는 의미입니다.

요소의 원래 순서를 유지해야 하거나 큰 배열을 여러 번 정렬해야 하는 경우 문제가 될 수 있습니다.

원래 배열을 수정하지 않으려면 배열을 정렬하기 전에 메서드를 사용하여 배열의 복사본을 만들 수 있습니다 slice().

예를 들면 다음과 같습니다.

let originalArray = [2, 1, 3];
let sortedArray = originalArray.slice().sort((a, b) => a - b);

console.log(originalArray); // Output: [2, 1, 3]
console.log(sortedArray); // Output: [1, 2, 3]

마무리 🎉

sort()이 기사에서는 JavaScript에서 배열을 정렬하는 방법, 방법의 다양한 단점 및 이를 수정하는 방법을 배웠습니다 .

정렬 방법과 그것이 할 수 있는 일에는 더 많은 것이 있지만 비교 기능이 있다는 것을 이해하면 많은 어려움을 처리하는 데 도움이 될 것입니다.

즐거운 코딩하세요!

출처: https://www.freecodecamp.org

#javascript 

최 호민

최 호민

1678256362

JavaScript에서 색상을 생성하는 방법

이 자습서에서는 JavaScript에서 임의의 색상을 생성하는 방법을 보여줍니다. JavaScript에서 임의 색상 생성기를 빌드합니다. 함수 및 무작위화와 같은 프로그래밍의 일반적인 주제를 살펴봅니다.

이 기사에서는 JavaScript에서 임의 색상 생성기를 빌드하는 데 사용할 것입니다. 그 과정에서 함수 및 무작위화와 같은 프로그래밍의 일반적인 주제를 탐색할 것입니다.

이러한 개념을 설명하기 위해 Change The Background Color 라는 프로젝트를 만들 것입니다 . 여기에서 데모를 볼 수 있습니다 .

이 자습서에서는 다음을 수행합니다.

  • 컴퓨터가 색상의 개념을 이해하는 방법을 배웁니다.
  • 16진수 시스템과 컴퓨터에 대한 유용성에 대해 배웁니다.
  • 코드에서 문제를 분리하는 방법 알아보기
  • JavaScript에서 사용되는 루프, 배열 및 함수의 세계를 탐색합니다.
  • 이 새로운 지식을 사용하여 16진수로 색상을 생성합니다.
  • JavaScript에서 이벤트 소개
  • HTML 코드에서 버튼을 클릭하여 함수를 호출합니다.
  • 버튼을 클릭하면 본문 스타일 배경색 변경

이 문서는 변수와 모든 프로그래밍 언어로 변수를 생성하는 방법에 익숙한 사람이라면 누구나 액세스할 수 있어야 합니다.  

우리가 다룰 내용

  1. 컴퓨터가 색상을 이해하는 방법
  2. 16진법이란?
  3. 색상 공간에서 16진수를 사용하는 방법
  4. 16진법으로 색상을 생성하는 방법

컴퓨터가 색상을 이해하는 방법

컴퓨터 디스플레이는 픽셀이라는 작은 점을 사용하여 빨간색, 녹색 및 파란색 빛을 혼합하여 색상을 표시합니다.

To interpret and manipulate colors, computers use mathematical models called color spaces. By converting colors into a specific color space, computers can modify and adjust them before displaying them on the screen.

There are many different types of color spaces, each with its own way of representing colors. Here are some examples:

  1. RGB (Red, Green, Blue): This is the most common color space used in computer graphics, and it represents colors by mixing different amounts of red, green, and blue components.
  2. CMYK (Cyan, Magenta, Yellow, Black): This is a color space used in printing, where colors are created by overlaying dots of different colors on top of each other.
  3. HSL (Hue, Saturation, Lightness): This color space represents colors based on their hue (which color they are), saturation (how intense the color is), and lightness (how bright or dark the color is).
  4. LAB (Lightness, A, B): This color space is used in digital imaging and represents colors based on their lightness, as well as their position on two color axes: A (from green to red) and B (from blue to yellow).
  5. XYZ: This color space represents colors based on the amount of light that they reflect or emit, and is often used in color matching applications.

What is the Hexadecimal System?

Hexadecimal (or simply "hex") is a base-16 numbering system that is commonly used in computing and digital electronics.

In this system, numbers are represented using 16 digits: the regular decimal digits 0 through 9, plus the letters A through F which represent values 10 through 15.

[0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F]

Hexadecimal is often used in computing because it provides a compact and easy-to-read way to represent binary numbers. Each hex digit corresponds to four binary digits, or bits, which means that two hexadecimal digits can represent a byte of data (8 bits).

How Hexadecimal Is Used In Color Spaces

Hexadecimal is commonly used to represent colors in various color spaces, particularly in digital media.

Each component in RGB can have a value between 0 and 255, and these values can be converted to hexadecimal notation using a base-16 numbering system.

In RGB hexadecimal notation, each component is represented by a two-digit hexadecimal number, which can range from 00 to FF.

For example,

COLORRGBHEXADECIMAL
Black0,0,0#000000
Teal0,186,186#00BABA
Green17,235,17#11EB11
Musterd-Yellow250,194,134#FAC286
White255,255,255#FFFFFF

 

X4ES_ppBld_5qGeavLFSlvSwyXHREWoFaO9WBIp3mV4psy-FNbZV6hXD5_eES4gdzpAXIS8uv1qdFeAyKCwPMgXaZnmlTpBBpw4X2Z8_pyP426g_RSLtipKJsid-e4lNy8D9cmgqE3EtDo3wnVnhC68

Hexadecimal color system illulstration

How to Generate Colors With Hexadecimals

Our goal in this section is to build the demo project. The demo project is a button. On clicking this button, a color is generated that changes the background of the HTML webpage.

There are the 6 steps to building the project. We'll walk through them one by one.

1. Represent hexadecimals using an array


const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]

첫 번째 단계는 캐릭터를 구조에 고정하는 것입니다. 단순성을 위해 배열을 선택했습니다. JavaScript에서 배열이 작동하는 방식을 사용하면 인덱스를 제공하여 항목을 선택할 수 있습니다 .

2. 이 배열에서 항목을 추출하는 함수를 만듭니다.

const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]

function getCharacter(index) {
	return hexCharacters[index]
}

getCharacter는 원하는 인덱스를 사용합니다. 인덱스는 정수여야 합니다.

이 함수는 인덱스를 가져와 해당 위치에 저장된 16진수 문자를 반환합니다 getCharacter . 이것은 우리가 색상을 선택할 때 도움이 됩니다.

3. 추출된 값을 이용하여 색상 표현

RGB의 16진수 표현은 #어레이에서 선택된 6개의 문자가 뒤따르는 것으로 시작합니다. 따라서 함수는 getCharacters6번 호출됩니다. for-loop를 사용하여 함수를 더 빠르게 호출 할 수 있습니다 .


const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]


function getCharacter(index) {
	return hexCharacters[index]
}

function generateJustOneColor(){
    
	let hexColorRep = "#"

    for (let position = 0; position < 6; position++){
        hexColorRep += getCharacter( position )
    }
	
	return hexColorRep

}

console.log( generateJustOneColor() )

6회 반복하여 문자열을 생성합니다.

generateJustOneColor()문자열로 표시되는 임의의 16진수 색상 코드를 생성합니다.

함수는 hexColorRep 라는 변수를 선언 하고 # 문자로 초기화하는 것으로 시작합니다.

다음으로 이 함수는 for 루프를 사용하여 색상 코드의 다음 6개 문자를 생성합니다. 각 색상 코드는 6자리 16진수로 표시되기 때문에 루프는 6번 실행됩니다.

루프 내에서 이 함수는 getCharacter()색상 코드의 각 위치에 대한 16진수를 생성하는 다른 함수를 호출합니다. 생성되는 숫자를 나타내기 위해 매개변수가 함수 에 position전달됩니다 .getCharacter()

6자리 색상 코드가 모두 생성되면 함수는 전체 색상 코드를 문자열로 반환합니다.

스크린샷-2023-02-21-at-08.56.42

매번 같은 결과가 반환됩니다.

위의 코드는 for-loop position에 대해 동일한 결과/색상을 반환합니다 . 따라서 임의성을 도입해야 합니다. 이는 우리가 선택한 캐릭터에 놀라움의 요소가 있어야 함을 의미합니다.

4. 임의의 색상을 생성하도록 코드를 개선합니다.

JavaScript에서 임의성을 도입하는 방법 중 하나입니다. range 에서 호출될 때마다 새로운 결과를 제공합니다 .Math.random() Math.random()0 to 1

Math.random()함수가 0(포함)과 1(제외) 사이의 임의의 십진수를 생성하는 동안 이 값을 조작하여 0에서 15 사이의 임의의 정수를 얻을 수 있습니다.

이는 임의의 십진수에 원하는 정수 범위(이 경우 16)를 곱한 다음 Math.floor()결과를 가장 가까운 정수로 내림하는 방법을 적용하여 수행됩니다. 이렇게 하면 출력이 원하는 정수 범위 내에 있게 됩니다.

예를 들어 Math.random()값을 생성하는 경우 0.43516을 곱하면 가 됩니다 6.96. 이 결과에 적용하면 0에서 15 사이의 임의의 정수인 Math.floor()로 내림됩니다 .6

Math.floor()여기에서 두 가지 역할을 수행합니다. 극단을 내림하여 RangeError를 방지하고 (최대 수는 15) 항상 정수를 반환하도록 합니다.

const randomNumber = Math.floor ( Math.random() * hexCharacters.length )

이 randomNumber는 getCharacters 함수의 인덱스 역할을 합니다.

스크린샷-2023-02-21-at-08.34.10

Math.random()은 호출될 때마다 새로운 결과를 제공합니다.

We have all the ingredients needed to generate our colour, so now we can combine them together. Each hex-colour must start with a "#" and be followed by 6 characters.



const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]



function getCharacter(index) {
	return hexCharacters[index]
}

function generateNewColor() {
	let hexColorRep = "#"

	for (let index = 0; index < 6; index++){
		const randomPosition = Math.floor ( Math.random() * hexCharacters.length ) 
    	hexColorRep += getCharacter( randomPosition )
	}
	
	return hexColorRep
}

console.log( generateNewColor() )

Loop 6 times. Generate random position. Use this position to pick an item from the array.

The generateNewColor() function is the main function of the program that generates the random hexadecimal color code. It starts by initializing a string variable named "hexColorRep" with the "#" character, as all hexadecimal color codes begin with this character.

Next, the function uses a for loop to generate six random characters for the color code. Within the loop, the function generates a random position within the range of the "hexCharacters" array using the Math.random() function and the length of the hexCharacters array. This random position is then used to obtain a random character from the hexCharacters array using the getCharacter() function. The resulting character is appended to the hexColorRep string variable.

Finally, the generateNewColor() function returns the complete hexadecimal color code represented as a string.

스크린샷-2023-02-21-at-08.55.07

The result is always a new hex-color-rep.

5. Create an interface to present our code

We need an interface so users can interact with our code and see the magic we have created.

We are going to have an HTML page with a list of instructions and a button. The elements button and span are given the id attribute so it's easier to find them in our JavaScript code. You can see the HTML code here.

데모4

6. Connect the button to the function using an event

Our goal is to change the background-color style of this HTML page.

let btn = document.getElementById('b')
let bgColor = document.getElementById('s')

btn.addEventListener("click", (event) => {
		
	const newColor = generateNewColor()

	document.body.style.backgroundColor  = newColor
	bgColor.textContent = newColor 
		
})

When the button is clicked, we generate a new color and set it to attribute of body.

This program that sets the background color of a webpage to a randomly generated hexadecimal color code when a button is clicked.

The program begins by defining two variables using the document.getElementById() method. The btn variable represents the button element on the webpage with the ID b, while the bgColor variable represents a text element on the webpage with the ID s.

Next, the program attaches an event listener to the btn element using the addEventListener() method. This listener listens for the click event on the button. When triggered, it executes a function that generates a new random color code using the generateNewColor() function.

The resulting color code is then assigned to the background color of the webpage using the style.backgroundColor property of the document.body element. This causes the entire webpage to be updated with the new color.

bgColor마지막으로 textContent 속성을 사용하여 웹 페이지의 요소 에도 색상 코드가 표시됩니다 .

여기에서 전체 코드를 볼 수 있습니다 .

ezgif.com-gif-maker-1

최종 제품

요약

이 기사에서는 JavaScript에서 임의의 색상을 생성하는 방법을 보여주었습니다. Math 클래스 의 random 및 floor 메서드를 사용 하고 for-loop의 기본 사용법을 보여주었습니다. 데모 프로젝트 에서 생성된 색상은 배경으로 HTML 페이지에 전달되었습니다. 이것이 바로 버튼을 클릭하면 새로운 색상이 생성되고 페이지의 배경색 스타일을 업데이트하는 이유입니다. 여기에서 전체 코드를 확인하십시오 .

 

출처: https://www.freecodecamp.org

#javascript

최 호민

최 호민

1677589140

JavaScript에서 삼항 연산자를 사용하는 방법

JavaScript의 삼항 연산자에 대해 알아보고 삼항 연산자를 사용하려는 이유와 사용 방법을 알아보세요. 또한 사용 시 염두에 두어야 할 몇 가지 모범 사례를 배우게 됩니다.

예제로 설명하는 JavaScript 삼항 연산자

삼항 연산자는 한 줄에서만 조건부 연산을 수행하는 간결하고 읽기 쉬운 표현식을 작성할 수 있게 해주는 JavaScript의 유용한 기능입니다.

이 기사에서는 삼항 연산자를 사용해야 하는 이유와 사용 방법에 대한 예를 볼 수 있습니다. 또한 사용 시 염두에 두어야 할 몇 가지 모범 사례를 배우게 됩니다.

그것에 들어가자!

JavaScript의 삼항 연산자는 무엇입니까?

?:조건 연산자라고도 하는 삼항 연산자 ( )는 JavaScript에서 조건문을 작성하는 약식 방법입니다. if..else명령문 대신 삼항 연산자를 사용할 수 있습니다.

true삼항 연산자는 부울 식이라고도 하는 지정된 조건을 평가하고 해당 조건이 또는 로 평가되는지 여부에 따라 결과를 반환합니다 false.

JavaScript에서 삼항 연산자를 사용하는 이유는 무엇입니까?

다음과 같은 몇 가지 이유로 삼항 연산자를 사용할 수 있습니다.

  • 코드가 더 간결해집니다 . 삼항 연산자의 구문은 최소화됩니다. 짧은 조건문과 더 적은 코드 줄을 작성하여 코드를 더 쉽게 읽고 이해할 수 있습니다.
  • 코드가 더 읽기 쉬워집니다 . 간단한 조건을 작성할 때 삼항 연산자를 사용하면 명령문과 비교하여 코드를 더 쉽게 이해할 수 있습니다 if..else.
  • 코드가 더 체계화됩니다 . 삼항 연산자를 사용하면 코드가 더 체계적이고 유지 관리하기 쉬워집니다. 이는 여러 조건문을 작성할 때 유용합니다. 삼항 연산자는 문을 사용할 때 발생하는 중첩의 양을 줄입니다 if..else.
  • 유연성을 제공합니다 . 삼항 연산자에는 많은 사용 사례가 있으며 그 중 일부는 변수에 값 할당, 웹 페이지에서 동적 콘텐츠 렌더링, 함수 인수 처리, 데이터 유효성 검사 및 오류 처리, 복잡한 표현식 생성을 포함합니다.
  • 성능 향상 : 어떤 경우에는 삼항 연산자가 if..else단일 단계에서 평가되기 때문에 삼항 연산자가 명령문보다 더 잘 수행할 수 있습니다.
  • 항상 값을 반환합니다 . 삼항 연산자는 항상 무언가를 반환해야 합니다.

JavaScript에서 삼항 연산자를 사용하는 방법 – 구문 개요

연산자는 하나의 조건과 두 개의 표현식의 세 부분으로 구성되기 때문에 "삼항"이라고 합니다.

삼항 연산자의 일반 구문은 다음과 유사합니다.

condition ? ifTrueExperssion : ifFalseExpression;

분석해 보겠습니다.

  • conditiontrue또는 인지 평가하고 결정하려는 부울 표현식입니다 false. 조건 다음에는 물음표 가 옵니다 ?.
  • ifTrueExpression조건이 로 평가되면 실행됩니다 true.
  • ifFalseExpression조건이 로 평가되면 실행됩니다 false.
  • 두 식은 콜론( )으로 구분됩니다 ..

삼항 연산자는 항상 변수에 할당한 값을 반환합니다.

const returnValue = condition ? ifTrueExperssion : ifFalseExpression;

다음으로 삼항 연산자의 작동 방식에 대한 예를 살펴보겠습니다.

JavaScript에서 삼항 연산자를 사용하는 방법

사용자가 성인인지 확인하고 싶다고 가정해 보겠습니다.

// get user input
const age = prompt("What is your age?");

// check condition
const message = (age >= 18) ? "You are an adult" : "You are not an adult yet";

console.log(message);

이 예에서는 삼항 연산자를 사용하여 사용자의 나이가 이상인지 확인했습니다 18.

먼저 prompt()내장 JavaScript 기능을 사용했습니다.

이 함수는 메시지가 있는 대화 상자를 열고 What is your age?사용자는 값을 입력할 수 있습니다.

사용자의 입력을 age변수에 저장합니다.

다음으로 조건( age >= 18)이 평가됩니다.

조건이 이면 true첫 번째 표현식 가 You are an adult실행됩니다.

사용자가 값을 입력한다고 가정합니다 18.

조건은 age >= 18다음과 같이 평가됩니다 true.

What is your age? 18

// output
You are an adult

조건이 이면 false두 번째 식인 가 You are not an adult yet실행됩니다.

사용자가 값을 입력한다고 가정합니다 17.

age >= 18이제 조건은 다음과 같이 평가됩니다 false.

What is your age? 17

// output
You are not an adult yet

앞에서 언급한 것처럼 명령문 대신 삼항 연산자를 사용할 수 있습니다 if..else.

다음은 명령문을 사용하여 위의 예에서 사용된 것과 동일한 코드를 작성하는 방법입니다 if..else.

// get user input
const age = prompt("What is your age?");

// check the condition

if (age >= 18) {
  console.log("Your are an adult");
} else {
  console.log("You are not an adult yet");
}

JavaScript의 삼항 연산자 모범 사례

삼항 연산자를 사용할 때 염두에 두어야 할 사항은 간단하게 유지하고 지나치게 복잡하게 만들지 않는 것입니다.

주요 목표는 팀의 나머지 개발자가 코드를 읽고 쉽게 이해할 수 있도록 하는 것입니다.

if..else따라서 간단한 명령문과 한 줄로 작성할 수 있는 명령문 의 간결한 대안으로 삼항 연산자를 사용하는 것이 좋습니다 .

너무 많이 하면 빨리 읽을 수 없게 될 수 있습니다.

예를 들어 경우에 따라 중첩된 삼항 연산자를 사용하면 코드를 읽기 어렵게 만들 수 있습니다.

// get user input
const age = prompt("What is your age?");

// check condition
const message = (age >= 18) ? (age == 18 ? "You are exactly 18" : "You are over 18") : "You are under 18";

console.log(message);

너무 많은 삼항 연산자를 중첩하는 경우 if...else대신 명령문을 사용하는 것이 좋습니다.

마무리

전반적으로 삼항 연산자는 코드를 더 읽기 쉽고 간결하게 만드는 데 도움이 되므로 JavaScript에서 유용한 기능입니다.

조건문을 한 줄로만 작성할 수 있고 코드 가독성을 염두에 두고 사용할 때 사용합니다.

읽어 주셔서 감사합니다. 즐거운 코딩하세요! :)

출처: https://www.freecodecamp.org

#javascript