현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

이제까지 문자열의 기초를 살펴보았습니다. 이제부터 - 텍스트 문자열의 길이 찾기, 문자열 합치기 및 쪼개기 등과 같은- 내장 된 메서드를 사용하여 문자열에서 수행 할 수 있는 유용한 작업에 대해 생각해 봅시다. 문자열의 한 문자를 다른 문자로 대체하는 등의 작업을 수행합니다.

선수 과목 :

기본 컴퓨터 활용 능력, HTML 및 CSS에 대한 기본적인 이해, JavaScript가 무엇인지 이해합니다.

목표: 문자열이 객체임을 이해하고, 해당 객체에서 사용할 수있는 몇 가지 기본 메서드를 사용하여 문자열을 조작하는 방법을 배웁니다.

Strings as objects

이전에 말했지만, 다시 말하면 - JavaScript의 모든 것이 객체입니다. 문자열을 만들 때, 예를 들면

var string = 'This is my string';

변수가 문자열 객체 인스턴스되면, 결과적으로 수많은 속성과 메서드가 사용 가능하게 됩니다. String 객체 페이지로 이동하여 페이지 측면의 목록을 내려다 보면 이것을 볼 수 있습니다!

이제 뇌가 녹기 시작하기 전에, 걱정하지 마십시오! 학습 여행 중에 초기에 대부분을 알 필요가 없습니다. 그러나 여기에서 살펴볼 몇 가지 사항을 자주 사용하게 될 것입니다.

콘솔에 예제를 작성해 보세요. 아래의 한가지를 제공합니다(새탭이나 새창에서 콘솔을 열수 있고, 브라우저의 개발자 콘솔을 사용할 수도 있습니다).

문자열의 길이 찾기

간단합니다 — 간단하게  length 프로퍼티를 사용할 수 있습니다. 다음 코드를 입력해 보세요.

var browserType = 'mozilla';
browserType.length;

결과는 7을 리턴해야 합니다. 'mozilla'는 7글자이기 때문입니다. 이것은 여러가지 이유로 유용합니다. 예를 들어 이름의 길이에 따라 이름의 순서를 정렬 해야 하던가,  유저가 작성한 이름이 특정 길이 이상일 경우 너무 길다는것을 알려줘야 하는 경우에 사용할 수 있습니다.

특정 문자열 찾기

관련하여, 대괄호 표기법을 이용해서 문자열안의 문자를 구할 수 있다. 대괄호 표기법은 변수명 끝에 대괄호를 포함한다. 대괄호 안에는 구하고 싶은 문자의 숫자를 포함시키면 되며, 예를 들어 아래의 경우 첫번째 문자를 구할 수 있다:

browserType[0];

컴퓨터는 1이 아니라 0 부터 숫자를 셉니다! 문자열의 마지막 문자를 구하기 위해서, 우리는 다음 코드를 사용할 수 있으며, 기술적인 length 프로퍼티과 같이 사용하면 아래와 같다:

browserType[browserType.length-1];

"mozilla"는 7 글자이지만, 숫자는 0부터 시작하기 때문에 글자의 위치는 6이다. 그렇기 때문에 length-1을 사용합니다. 예를 들어, 여러 문자열중 첫번째 문자를 찾아 알파벳순으로 정렬해야 할 경우에 사용할 수 있습니다.

문자열 내부의 하위 문자열 찾기 및 추출

  1. 때때로 큰 문자열 안의 작은 문자열(우리는 이것을 하위 문자열이라고 이야기 한다.)을 찾고 싶을 것이다. 이 작업은 indexOf()를 사용하여 완료 할 수 있다, which takes a single parameter — 찾기 원하는 하위 문자열을 찾을 수 있다. 시도해보자:
    browserType.indexOf('zilla');
    결과는 2이다. 하위 문자열인 "zilla"는 "mozilla'의 2번 위치(0, 1, 2— 그러므로 3번째 문자열)에서 시작한다. 이러한 코드는 문자열을 필터링하는 데 사용될 수 있다. 예를 들어 웹 주소 목록에서 "mozilla"가 포함 된 주소 만 인쇄하고 싶은 경우 이다.
  2. 다른 방법으로도 할 수 있으며, 더욱 효율적일 수 있다. 다음 예제를 따라해 보자:
    browserType.indexOf('vanilla');
    이렇게하면 -1( 하위 문자열 (이 경우 'vanilla')이 기본 문자열에서 발견되지 않으면 반환한다.)의 결과를 얻을 수 있다.

    하위 문자열 'mozilla'가 포함되지 않은 문자열의 모든 인스턴스를 찾으려면 이 연산자를 사용하고 아래에 표시된 것처럼 부정 연산자를 사용해서 작업을 수행 할 수 있습니다. 다음과 같이 할 수 있다: 
    if(browserType.indexOf('mozilla') !== -1) {
      // do stuff with the string
    }
  3. 문자열 내에서 부분 문자열이 어디에서 시작되고 어떤 문자로 끝내는지 싶은지 알고 있으면 slice()를 사용하여 문자열을 추출 할 수 있다. 다음을 시도해보자:
    browserType.slice(0,3);
    "moz"를 반환합니다 - 첫 번째 파라메터는 추출을 시작할 문자 위치이고 두 번째 파라메터는 추출 할 마지막 문자 위치입니다. 따라서 슬라이스는 첫 번째 위치에서부터 마지막 위치까지 포함됩니다.
  4. Also, if you know that you want to extract all of the remaining characters in a string after a certain character, you don't have to include the second parameter, rather, you only need to include the character position from where you want to extract the remaining characters in a string. Try the following:
    browserType.slice(2);
    This returns "zilla" — this is because the character position of 2 is the letter z, and because you didn't include a second parameter, the substring that was returned was all of the remaining characters in the string. 

Note: The second parameter of slice() is optional: if you don't include it, the slice ends at the end of the original string. There are other options too; study the slice() page to see what else you can find out.

대/소문자 변경

The string methods toLowerCase() and toUpperCase() take a string and convert all the characters to lower or upper case, respectively. This can be useful for example if you want to normalize all user-entered data before storing it in a database.

Let's try entering the following lines to see what happens:

var radData = 'My NaMe Is MuD';
radData.toLowerCase();
radData.toUpperCase();

문자열의 일부를 변경하기

You can replace one substring inside a string with another substring using the replace() method. This works very simply at a basic level, although there are some advanced things you can do with it that we won't go into yet.

It takes two parameters — 바뀜을 당하는 문자와 바꾸려는 문자입니다. 다음 예제를 따라해보세요.:

browserType.replace('moz','van');

Active learning examples

In this section we'll get you to try your handing at writing some string manipulation code. In each exercise below, we have an array of strings, and a loop that processes each value in the array and displays it in a bulleted list. You don't need to understand arrays or loops right now — these will be explained in future articles. All you need to do in each case is write the code that will output the strings in the format that we want them in.

Each example comes with a Reset button, which you can use to reset the code if you make a mistake and can't get it working again, and a Show solution button you can press to see a potential answer if you get really stuck.

Filtering greeting messages

In the first exercise we'll start you off simple — we have an array of greetings card messages, but we want to sort them to list just the Christmas messages. We want you to fill in a conditional test inside the if( ... ) structure, to test each string and only print it in the list if it is a Christmas message.

  1. First think about how you could test whether the message in each case is a Christmas message. What string is present in all of those messages, and what method could you use to test whether it is present?
  2. You'll then need to write a conditional test of the form operand1 operator operand2. Is the thing on the left equal to the thing on the right? Or in this case, does the method call on the left return the result on the right?
  3. Hint: In this case it is probably more useful to test whether the method call isn't equal to a certain result.

대/소문자 맞게 수정하기

이 예제에는 영국도시의 이름들을 모아놨습니다만 대/소문자가 잘못 되어있습니다. 우리는이 문자들을 첫번째 문자를 제외하고 모두 소문자로 변경해야합니다. 이 것은 다음과 같은 방식으로 할 수 있습니다.:

  1. Convert the whole of the string contained in the input variable to lower case and store it in a new variable.
  2. Grab the first letter of the string in this new variable and store it in another variable.
  3. Using this latest variable as a substring, replace the first letter of the lowercase string with the first letter of the lowercase string changed to upper case. Store the result of this replace procedure in another new variable.
  4. Change the value of the result variable to equal to the final result, not the input.

Note: A hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.

Making new strings from old parts

In this last exercise the array contains a bunch of strings containing information about train stations in the North of England. The strings are data items that contain the three letter station code, followed by some machine-readable data, followed by a semi-colon, followed by the human-readable station name. For example:

MAN675847583748sjt567654;Manchester Piccadilly

We want to extract the station code and name, and put them together in a  string with the following structure:

MAN: Manchester Piccadilly

We'd recommend doing it like this:

  1. Extract the three-letter station code and store it in a new variable.
  2. Find the character index number of the semi-colon.
  3. Extract the human-readable station name using the semi-colon character index number as a reference point, and store it in a new variable.
  4. Concatenate the two new variables and a string literal to make the final string.
  5. Change the value of the result variable to equal to the final string, not the input.

결론

You can't escape the fact that being able to handle words and sentences in programming is very important — particularly in JavaScript, as web sites are all about communicating with people. This article has given you the basics that you need to know about manipulating strings for now. This should serve you well as you go into more complex topics in the future. Next, we're going to look at the last major type of data we need to focus on in the short term — Arrays.

문서 태그 및 공헌자

이 페이지의 공헌자: miyunim, limong, daesD, DrOhjho, ChanghwaLee
최종 변경: miyunim,