본문 바로가기
내일배움캠프/회고록

7월 3일 수요일

by jhdevtrace 2024. 7. 4.

HTML과 JavaScript에서 문자열을 정의할 때 사용하는 따옴표(', ", ```)는 각각 조금씩 다른 용도로 사용됩니다. 아래는 각 따옴표의 사용 용도와 차이점에 대한 설명입니다.

  1. 작은 따옴표 ('):
    • HTML 속성 값이나 JavaScript 문자열을 정의할 때 사용할 수 있습니다.
    • 작은 따옴표 안에 작은 따옴표를 포함하려면 이스케이프(\\')해야 합니다.
    • 주로 HTML 속성 값이나 JSON 문자열 등에서 사용됩니다.
    html코드 복사
    <input type='text' value='Hello'>
    
    
  2. 큰 따옴표 ("):
    • HTML 속성 값이나 JavaScript 문자열을 정의할 때 사용할 수 있습니다.
    • 큰 따옴표 안에 큰 따옴표를 포함하려면 이스케이프(\\")해야 합니다.
    • HTML 속성 값으로 문자열을 정의할 때 일반적으로 사용됩니다.
    html코드 복사
    <input type="text" value="Hello">
    
    
  3. 백틱 (```):
    • JavaScript에서 템플릿 리터럴(Template Literal)을 정의할 때 사용됩니다.
    • 여러 줄의 문자열을 쉽게 작성할 수 있고, 문자열 내에 변수를 쉽게 포함시킬 수 있습니다.
    • 백틱 문자열 안에서는 변수 치환(${expression})이 가능합니다.
    javascript코드 복사
    const name = 'World';
    const greeting = `Hello, ${name}!`; // 결과: "Hello, World!"
    
    

예시 및 비교

HTML 속성에서의 사용

HTML에서는 속성 값으로 작은 따옴표와 큰 따옴표를 사용할 수 있습니다. 일반적으로 큰 따옴표가 더 자주 사용됩니다.

html코드 복사
<!-- 큰 따옴표 사용 -->
<input type="text" value="Hello">

<!-- 작은 따옴표 사용 -->
<input type='text' value='Hello'>

JavaScript에서의 사용

JavaScript에서는 세 가지 모두 문자열을 정의하는 데 사용할 수 있지만, 백틱은 템플릿 리터럴의 경우에 사용됩니다.

javascript코드 복사
// 큰 따옴표
let string1 = "Hello, World!";

// 작은 따옴표
let string2 = 'Hello, World!';

// 백틱 (템플릿 리터럴)
let name = 'World';
let string3 = `Hello, ${name}!`; // 결과: "Hello, World!"

요약

  • 작은 따옴표 ('): HTML 속성 값이나 JavaScript 문자열에 사용. 문자열 내에 작은 따옴표를 포함할 때 이스케이프 필요.
  • 큰 따옴표 ("): HTML 속성 값이나 JavaScript 문자열에 사용. 문자열 내에 큰 따옴표를 포함할 때 이스케이프 필요.
  • 백틱 (```): JavaScript 템플릿 리터럴에 사용. 여러 줄 문자열 및 변수 치환(${expression})이 가능.

따라서, 각 따옴표의 사용 용도에 맞게 적절히 선택하여 사용하면 됩니다.

StringBuilder 특징

  • 가변성: StringBuilder는 문자열을 변경할 수 있습니다. 즉, 새로운 객체를 생성하지 않고도 문자열을 추가, 수정, 삭제할 수 있습니다.
  • 성능: 문자열을 자주 변경하는 경우, StringBuilder는 String보다 성능이 뛰어납니다.
  • 사용 용이성: 다양한 메서드를 제공하여 문자열을 쉽게 조작할 수 있습니다.
public class StringBuilderExample {
    public static void main(String[] args) {
        // StringBuilder 객체 생성
        StringBuilder sb = new StringBuilder();

        // 문자열 추가
        sb.append("Hello");
        sb.append(" ");
        sb.append("World");

        // 출력
        System.out.println(sb.toString()); // 출력: Hello World

        // 문자열 삽입
        sb.insert(6, "Beautiful ");
        System.out.println(sb.toString()); // 출력: Hello Beautiful World

        // 문자열 삭제
        sb.delete(6, 16);
        System.out.println(sb.toString()); // 출력: Hello World

        // 문자열 대체
        sb.replace(6, 11, "Java");
        System.out.println(sb.toString()); // 출력: Hello Java

        // 문자열 역순
        sb.reverse();
        System.out.println(sb.toString()); // 출력: avaJ olleH
    }
}

'내일배움캠프 > 회고록' 카테고리의 다른 글

7월 15일 월요일 개강  (5) 2024.07.15
7월 4일 목요일  (0) 2024.07.08
7월 2일 화요일  (0) 2024.07.04
7월 1일 월요일  (0) 2024.07.02
6월 26일 수요일  (0) 2024.06.27