엔지니어처럼 생각하기 시작하는 데 도움이 되는 초보자 친화적인 코드 문제가 많이 있습니다. 그러한 과제 중 하나는 주어진 문자열에서 모든 단어의 첫 글자를 대문자로 표시하는 것입니다. 이 기사에서는 프롬프트와 JavaScript에서 가능한 몇 가지 솔루션을 살펴보겠습니다.
프롬프트
주어진 기능, 대문자 , str을 취합니다. 매개변수로 해당 str을 반환합니다. 모든 단어가 대문자로 표시됩니다. 솔루션의 극단적인 경우를 생각해 보십시오(예:입력 없음, 잘못된 입력 유형 등).
접근 방식
- 프롬프트를 다시 살펴보십시오. 문구에서 찾을 수 있는 키워드를 적어 두거나 강조 표시하십시오.
- 문제라는 단어의 의미를 함께 연결하십시오. 코드 챌린지를 수행할 때 가장 어려운 부분 중 하나는 문제가 무엇을 요구하는지 파악하는 것입니다. 문제를 이해하면 문제를 해결하는 데 많은 도움이 될 것입니다.
- 가능한 솔루션을 유사 코딩합니다. 실제 코드일 필요는 없습니다(IDE 또는 브라우저 콘솔에서 실행될 필요는 없습니다. 일반 영어도 괜찮음):
Understand what you're given: given a function that takes some sort of input Understand what you need to return: a string What's the first thing you need to do? What are some options I can take, knowing that the input is a string? Is there string methods I can use? How can I look them up if I don't know what they are? What do I do if the input is empty or it's a number or object? Maybe let's start by writing a for loop to loop through the string. What comes next? ... and so on...
차근차근 문제를 풀어보세요. 잘못된 입력이 전달되거나 빈 문자열이 있을 수 있는 경우와 문제를 논리적 단계로 나누는 방법을 생각하는 데 도움이 됩니다. 이것은 기본적으로 실험 단계입니다. 오답은 없으며 문제에 접근하는 방법에 대한 생각만 있습니다. 이러한 생각은 잘못 인도되거나 잘못 인도될 수 있습니다. 이것이 하지 않을 접근 방식에 대해 배우는 방법입니다. 문제를 해결하십시오.
큰 소리로 설명하여 문제를 분해할 수 있다면 논리가 더 쉬워진다는 것을 알게 되었습니다. 귀하의 마일리지는 귀하의 접근 방식에 따라 다를 수 있지만 적어도 귀하에게 효과가 있는 경우를 대비하여 제안하고 싶습니다! 이와 같은 작은 문제에 대한 의사 코드는 조금 많은 것 같지만 지금 개념을 연습하면 훨씬 더 어려운 문제를 작업할 때 더 쉽게 올 것입니다.
솔루션
해결책 #1:string.replace() 및 charAt() 메서드가 있는 split() 및 for 루프
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>for loop</title>
</head>
<body>
<div id="root"></div>
<script async defer>
let capitalize = (str) => {
let arr = str.split(' ');
for(let i = 0; i < arr.length; i++ ) {
arr[i] = arr[i].replace(arr[i].charAt(0), arr[i].charAt(0).toUpperCase());
}
return arr.join(' ');
}
let root = document.getElementById('root');
root.innerHTML = JSON.stringify(capitalize('the quick brown fox jumped over the lazy dog'));
</script>
</body>
</html> 이 첫 번째 솔루션에서는 공백에서 문자열을 분할합니다. 이렇게 하면 각 개별 단어가 자체 색인으로 포함된 arr이 제공됩니다. 배열을 반복하면 각 문자열의 개인 인덱스에 액세스할 수 있습니다. 인덱스 0의 문자열 문자(arr[i].charAt(0))를 대문자 값으로 대체한 결과로 인덱스 i의 문자열(이 경우 문자열은 arr[i]임)을 다시 할당했습니다. 그런 다음 각 단어 사이에 공백이 있는 문자열로 arr을 다시 결합했습니다.
해결 방법 #2:맵 방법 및 슬라이스로 분할
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Map</title>
</head>
<body>
<div id="root"></div>
<script async defer>
let capitalize = (str) => {
// split the string on the spaces so that we know what we are working with.
let arr = str.split(' ') // make sure there is a space in between the two quotes here
//use the map method
arr.map((word, index, array) => {
array[index] = array[index][0].toUpperCase() + array[index].slice(1);
return array[index];
})
console.log(arr)
return arr.join(' ');
}
let root = document.getElementById('root');
root.innerHTML = JSON.stringify(capitalize('the quick brown fox jumped over the lazy dog'));
</script>
</body>
</html>
이 솔루션에서는 매우 유사하게 시작하지만 map이라는 ES6 배열 메서드를 사용하여 배열을 반복하고 각 단어의 첫 번째 문자를 대문자로 표시하는 새 값을 반환합니다. toUpperCase()를 사용하여 수행할 작업을 명시적으로 배치하여 이 작업을 수행합니다. 첫 번째 문자에 대한 메소드, slice() 나머지 문자열에 대한 메서드와 단어의 새 버전을 가져오는 문자열 연결. 그런 다음 배열을 결합하고 반환합니다.
해결책 #3:정규 표현식
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head>
<body>
<div id="root"></div>
<script async defer>
let capitalize = (str) => {
let regex = /(^|\s)\S/g
return str.replace(regex, letter => letter.toUpperCase());
}
let root = document.getElementById('root');
root.innerHTML = JSON.stringify(capitalize('the quick brown fox jumped over the lazy dog'));
</script>
</body>
</html> 이 솔루션에서는 정규식을 사용하여 문자열의 시작 부분( ^ ) 또는 에서 공백이 아닌 모든 문자( \S )를 찾습니다. 공백 문자( \s ) 뒤. 끝에 있는 g 플래그는 전역을 의미하며 해당 패턴의 모든 인스턴스를 찾을 수 있습니다. 그런 다음 replace 메소드를 사용하여 해당 정규식 패턴을 해당 문자를 대문자로 반환하는 함수로 교체합니다.
최종 생각
이러한 솔루션이 이 문제에 대한 유일한 솔루션은 결코 아닙니다. 아마도 이러한 작업을 더 많이 하기 시작하면 기사나 블로그 게시물이 제시하는 것과 다를 수도 있고 그렇지 않을 수도 있는 솔루션을 찾게 될 것입니다. 좋은 일이야. 그것은 당신이 엔지니어처럼 생각하기 시작했다는 것을 의미합니다. 그리고 그것이 목표입니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
견디어 내다. 이러한 솔루션에서는 엣지 케이스가 처리되지 않았습니다. 인수가 비어 있거나 숫자인 경우 어떻게 해야 합니까? 이러한 극단적인 경우를 처리하여 위의 코드에 추가해 보십시오.
힌트 :뱅/느낌표를 사용하여 조건부로 str 존재합니다. 유형 을 찾는 방법이 있는지 알아보려면 MDN 문서를 살펴보세요. 그것이 무엇인지 반드시 알지 못할 때.
한 가지 더 :JavaScript Reverse String Code Challenge에 아직 도전하지 않았다면 도전해보세요!
고려할 추가 리소스:
Ruby에서 정규식 사용 – 이것은 Ruby 전용이지만 대부분의 정규식은 언어에 구애받지 않습니다. 솔루션 #3의 RegExp 구문에 대해 자세히 알아보려면 확인하십시오.
JavaScript Replace Text:A Step-By-Step Guide – 솔루션 #1에서 사용되는 replace 메서드 전용 자습서입니다.