Ký hiệu đô la ($) trong JavaScript: jQuery, Template Literals và những lỗi phổ biến

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu

Biểu tượng “$” thường được sử dụng trong JavaScript có vẻ đơn giản, nhưng nó có thể phục vụ nhiều mục đích và được dùng trong một loạt các tình huống. Tuy nhiên, nhiều nhà phát triển—đặc biệt là người mới bắt đầu—thường tự hỏi “$” thực sự có nghĩa là gì và họ nên sử dụng nó như thế nào một cách đúng đắn.

Cụ thể, jQuery và template literals là những nơi phổ biến mà “$” đóng vai trò quan trọng. Trong bài viết này, chúng tôi sẽ giải thích mọi thứ từ cơ bản đến các cách sử dụng nâng cao, giúp người mới và người học trung cấp tự tin sử dụng “$” trong mã của mình.

Bài viết này tập trung vào các điểm sau:

• Vai trò và cách sử dụng cơ bản của “$” trong JavaScript
• Các ví dụ mã thực tế sử dụng “$” trong jQuery
• Các ví dụ nâng cao sử dụng “${}” trong template literals
• Cách “$” được sử dụng trong các thư viện và framework khác
• Xử lý sự cố và cách tránh xung đột

Bằng cách đọc bài viết này, bạn sẽ loại bỏ sự nhầm lẫn quanh “$” và có khả năng phát triển chương trình hiệu quả hơn. Bài viết bao gồm rất nhiều ví dụ mã, vì vậy hãy thử chúng khi bạn học.

Trong phần tiếp theo, chúng ta sẽ xem xét kỹ hơn vai trò cơ bản của “$” trong JavaScript.

2. Cơ bản và Vai trò của “$” trong JavaScript

2-1. “$” là gì trong JavaScript?

“$” là một định danh hợp lệ trong JavaScript (có nghĩa là nó có thể được dùng làm tên biến hoặc tên hàm), và nó không phải là một từ khóa được dành riêng. Điều đó có nghĩa là bạn có thể tự do sử dụng nó trong mã của mình.

Ví dụ 1: Sử dụng “$” trong tên biến

const $name = "Alice";
console.log($name); // Output: Alice

Ví dụ 2: Sử dụng “$” trong tên hàm

function $calculateTax(price) {
  return price * 1.1;
}
console.log($calculateTax(100)); // Output: 110

Vì “$” ngắn gọn và đơn giản, nó có thể hữu ích khi bạn muốn viết mã ngắn gọn.

2-2. Tại sao “$” được coi là đặc biệt

JavaScript bản thân không gán bất kỳ ý nghĩa đặc biệt nào cho “$”, nhưng nó đã trở nên phổ biến vì các lý do sau:

1. Biểu tượng của jQuery jQuery sử dụng “$” làm định danh chính, cho phép bạn viết các thao tác DOM và xử lý sự kiện một cách rất ngắn gọn. Ví dụ:

   $('#element').text('Updated text');
   

2. Chèn biến trong Template Literals Bắt đầu từ ES6, template literals của JavaScript cho phép bạn nhúng các biến và biểu thức bằng cách sử dụng “${}”. Ví dụ:

   const name = "Bob";
   console.log(`Hello, ${name}!`); // Output: Hello, Bob!
   

3. Sử dụng trong các thư viện và framework khác

• Trong Prototype.js, “$” được dùng như một phím tắt cho các thao tác DOM.
• Trong AngularJS, “$” xuất hiện trong việc tiêm phụ thuộc và tên các service.

2-3. Những hiểu lầm phổ biến và lưu ý quan trọng

1. “$” không phải là từ khóa được dành riêng trong JavaScript Bạn có thể tự do sử dụng “$” trong tên biến và hàm, nhưng cần cẩn thận vì nó có thể xung đột với các thư viện hoặc framework khác.
2. “$” không độc quyền thuộc về jQuery Mặc dù “$” thường được dùng trong jQuery, nhưng điều đó không có nghĩa là bạn phải dùng jQuery. Bạn cũng có thể sử dụng “$” trong JavaScript thuần (native).

Ví dụ: Sử dụng “$” như một hàm tùy chỉnh

const $ = (id) => document.getElementById(id);
console.log($('example').innerText); // Output: text content of the element

Tóm tắt

Trong phần này, chúng tôi đã giải thích rằng “$” không phải là một từ khóa đặc biệt trong JavaScript, mà chỉ là một định danh hợp lệ. Vì nó thường được dùng cùng với các tính năng tiện lợi như jQuery và template literals, việc hiểu đúng vai trò của nó là rất quan trọng.

Trong phần tiếp theo, chúng tôi sẽ giải thích cách “$” được sử dụng trong jQuery với các ví dụ thực tế.

3. Cách sử dụng “$” trong jQuery

3-1. Chọn và thao tác với các phần tử

Ví dụ 1: Chọn phần tử theo ID hoặc Class

$('#title').text('New Title');

Giải thích：

• $('#title') : Chọn phần tử có ID là title.
• .text() : Thay đổi nội dung văn bản bên trong phần tử đã chọn.

Ví dụ 2: Thay đổi Kiểu theo Lớp

$('.box').addClass('active').removeClass('inactive');

Giải thích：

• $('.box') : Chọn các phần tử có lớp box .
• .addClass('active') : Thêm lớp active .
• .removeClass('inactive') : Xóa lớp inactive .

3-2. Đăng ký Sự kiện

Ví dụ: Hiển thị Cảnh báo Khi Nút Được Nhấp

$('#btn').click(() => {
  alert('The button was clicked!');
});

Giải thích：

• .click() : Đăng ký trình xử lý sự kiện nhấp chuột.
• Hàm mũi tên: Hiển thị cảnh báo khi nút được nhấp.

3-3. Làm việc với Biểu mẫu

Ví dụ 1: Lấy và Đặt Giá trị Đầu vào Văn bản

const value = $('#text-input').val(); // Get the input value
$('#text-input').val('New value');    // Set a new value

Ví dụ 2: Kiểm tra Trạng thái Hộp Kiểm

if ($('#checkbox').prop('checked')) {
  console.log('It is checked');
} else {
  console.log('It is not checked');
}

3-4. Triển khai Yêu cầu Ajax

Ví dụ 1: Lấy Dữ liệu JSON

$.ajax({
  url: 'data.json',
  method: 'GET',
  success: (data) => {
    console.log(data); // Display the data in the console
  },
  error: () => {
    alert('Failed to fetch the data.');
  }
});

Giải thích：

• url : Chỉ định URL yêu cầu.
• method : Chỉ định phương thức HTTP (GET hoặc POST).
• success : Chạy khi dữ liệu được lấy thành công.
• error : Chạy khi yêu cầu thất bại.

3-5. Áp dụng Hiệu ứng Hoạt hình

Ví dụ 1: Mờ Dần Vào và Mờ Dần Ra

$('#box').fadeIn(1000);  // Show over 1 second
$('#box').fadeOut(1000); // Hide over 1 second

Ví dụ 2: Hiệu ứng Trượt

$('#panel').slideDown(500); // Slide down over 0.5 seconds
$('#panel').slideUp(500);   // Slide up over 0.5 seconds

Tóm tắt

Trong phần này, chúng ta đã bao quát các cách cốt lõi mà “$” được sử dụng trong jQuery. Lợi ích chính là bạn có thể triển khai các nhiệm vụ phổ biến—như chọn và thao tác phần tử, đăng ký sự kiện, xử lý biểu mẫu, thực hiện yêu cầu Ajax, và áp dụng hoạt hình—một cách rất gọn gàng.

Bằng cách sử dụng jQuery, bạn có thể viết mã JavaScript ngắn hơn, thường dễ đọc và bảo trì hơn.

Trong phần tiếp theo, chúng ta sẽ giải thích cách sử dụng “${}” trong template literals.

4. Cách Sử dụng “${}” trong Template Literals

4-1. Cú pháp Cơ bản của Template Literals

Template literal là một chuỗi được bao quanh bởi dấu backtick (`). Bằng cách sử dụng “${}” bên trong chuỗi, bạn có thể nhúng biến và biểu thức.

Ví dụ 1: Nhúng một Biến

const name = "Alice";
console.log(`Hello, ${name}!`); // Output: Hello, Alice!

Ví dụ 2: Nhúng một Tính toán

const price = 1000;
const tax = 0.1;
console.log(`Price with tax: ${price * (1 + tax)} yen`); // Output: Price with tax: 1100 yen

4-2. Nhúng Biểu thức Phức tạp Hơn

Ví dụ 1: Nhúng Biểu thức Điều kiện

const isMember = true;
console.log(`Membership status: ${isMember ? 'Active' : 'Inactive'}`); // Output: Membership status: Active

Ví dụ 2: Nhúng Kết quả từ Mảng hoặc Đối tượng

const user = { name: 'Bob', age: 25 };
console.log(`User: ${user.name}, Age: ${user.age}`); // Output: User: Bob, Age: 25

4-3. Tạo Chuỗi Đa dòng

Ví dụ 1: Một Thông điệp với Dấu Ngắt Dòng

const message = `
Hello,
Let’s start learning JavaScript.
This example explains template literals.
`;
console.log(message);

4-4. Tạo Mã HTML

Ví dụ 1: Tạo Mẫu HTML Động

const title = 'How to Use JavaScript';
const content = 'This is an example of generating HTML with template literals.';

const html = `
  <div class="post">
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

console.log(html);

4-5. Template Literals Lồng nhau

Ví dụ: Tạo Các Mục Danh sách Động

const items = ['Apple', 'Orange', 'Grape'];

const list = `
  <ul>
    ${items.map(item => `<li>${item}</li>`).join('')}
  </ul>
`;

console.log(list);

Summary

In this section, we explained template literals—from the basic syntax to more advanced examples. Template literals are a convenient feature that helps in many situations, including string manipulation and dynamic HTML generation.

In particular, using “${}” allows you to create flexible strings with embedded variables and expressions, improving both readability and development efficiency.

In the next section, we’ll take a look at how “$” is used in other libraries and frameworks.

5. Examples of Using “$” in Other Libraries

5-1. Using “$” in Prototype.js

Prototype.js is a JavaScript library designed to make DOM manipulation and event handling more efficient. In this library, “$” is used as a shortcut for selecting HTML elements.

Example 1: Selecting and Manipulating an Element

$('element-id').addClassName('active');

Explanation：

• $('element-id') : Selects the element whose ID is element-id .
• .addClassName('active') : Adds the class name active .

5-2. Using “$” in AngularJS

In AngularJS, “$” is used to identify framework-specific services and objects.

Example 1: Using the Scope Object

angular.module('app', [])
  .controller('MainCtrl', ['$scope', function($scope) {
    $scope.message = 'Hello, AngularJS!';
  }]);

Explanation：

• $scope : An object that connects the view and the controller.

Example 2: Making an Ajax Request

angular.module('app', [])
  .controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
    $http.get('data.json').then(response => {
      $scope.data = response.data;
    });
  }]);

5-3. Using “$” with D3.js

D3.js is a data visualization library that strongly supports selections and data binding.

Example: Combining jQuery and D3.js

$('#chart').append('<svg width="500" height="300"></svg>');
d3.select('svg')
  .append('circle')
  .attr('cx', 150)
  .attr('cy', 150)
  .attr('r', 50)
  .style('fill', 'blue');

5-4. Using “$” in React

In React, “$” itself does not have a special role, but it may still be used as part of variable names or identifiers.

Example: Using “$” as an Identifier for Styling

const $button = {
  backgroundColor: 'blue',
  color: 'white',
  padding: '10px'
};

function App() {
  return <button style={$button}>Click</button>;
}

Summary

In this section, we introduced examples of how “$” is used across libraries such as Prototype.js, AngularJS, D3.js, and React.

• Prototype.js : Used as a shortcut for DOM manipulation.
• AngularJS : Used for framework-specific services and scope management.
• D3.js : Often combined with jQuery for efficient DOM updates.
• React : Used as part of identifiers for things like style management.

In the next section, we’ll explain important precautions when using “$” and how to resolve conflicts.

6. Troubleshooting and Precautions

6-1. Conflicts Between Libraries

Common Issue 1: Conflict Between jQuery and Prototype.js

Uncaught TypeError: $ is not a function

Cause：

• jQuery and Prototype.js both try to use “$” , causing one of them to fail.

Solution: Use noConflict()

var jq = jQuery.noConflict();
jq('#element').text('Conflict resolved');

6-2. Template Literal Errors

The “${}” syntax in template literals was introduced in ES6, so it is not supported in older browsers.

Error Message

SyntaxError: Unexpected token `

Solution 1: Use a Modern Browser
Modern versions of Google Chrome and Firefox work without issues.

Solution 2: Transpile Code Using Babel

Before Transpiling

const name = "Alice";
console.log(`Hello, ${name}!`);

Sau Khi Biên Dịch

var name = "Alice";
console.log("Hello, " + name + "!");

6-3. Mẹo Gỡ Lỗi

1. Kiểm Tra Trạng Thái Hiện Tại Của “$”

console.log(typeof $); // Result: 'function' or 'undefined'

• function : “$” được định nghĩa đúng là một hàm.
• undefined : “$” chưa được định nghĩa, hoặc có thể đang xảy ra xung đột.

2. Kiểm Tra Các Phụ Thuộc

Mở công cụ phát triển của trình duyệt và kiểm tra tab Network để xác nhận rằng jQuery và các thư viện khác đã được tải đúng cách.

6-4. Ghi Chú Về Quy Tắc Viết Mã

1. Đặt Tên Cho Các Hàm Tùy Chỉnh

const $id = (id) => document.getElementById(id);
console.log($id('header').innerText);

2. Quản Lý Phạm Vi An Toàn

(function($) {
  $('#element').text('Run safely');
})(jQuery);

Tóm Tắt

Trong phần này, chúng tôi đã đề cập đến các vấn đề xung đột thường gặp khi sử dụng “$”, cũng như các vấn đề tương thích của template literal. Chúng tôi cũng đã giới thiệu các giải pháp như noConflict(), biên dịch với Babel, và các kỹ thuật gỡ lỗi.

Trong phần tiếp theo, chúng tôi sẽ đề cập đến Câu Hỏi Thường Gặp (FAQ) và giải thích chi tiết hơn về các thắc mắc và giải pháp phổ biến.

7. Câu Hỏi Thường Gặp (FAQ)

Q1. Có bắt buộc phải dùng “$” trong JavaScript không?

A1. Không, không bắt buộc.
Trong JavaScript, “$” được coi là một định danh hợp lệ, có nghĩa là bạn có thể tự do sử dụng nó trong tên biến và tên hàm.

Ví dụ 1: Sử Dụng “$” trong Tên Biến Thông Thường

const $name = "Alice";
console.log($name); // Output: Alice

Q2. Tôi có thể sử dụng “$” mà không dùng jQuery không?

A2. Có, bạn có thể.
Vì “$” có thể được sử dụng tự do như một tên biến hoặc hàm, bạn có thể định nghĩa hàm “$” riêng của mình trong JavaScript thuần.

Ví dụ: Tạo Hàm Để Chọn Một Phần Tử

const $ = (selector) => document.querySelector(selector);
console.log($('p').innerText); // Gets the content of the first <p> tag

Q3. Template literal “${}” của tôi không hoạt động. Tại sao?

A3. Template literal được giới thiệu trong ES6, vì vậy các trình duyệt cũ không hỗ trợ chúng.

Giải Pháp 1: Sử Dụng Trình Duyệt Hiện Đại

Các phiên bản hiện đại của Google Chrome và Firefox hỗ trợ template literal mà không gặp vấn đề nào.

Giải Pháp 2: Biên Dịch Mã của Bạn Bằng Babel

Ví Dụ (Trước Khi Biên Dịch)

const name = "Alice";
console.log(`Hello, ${name}!`);

Mã Đã Chuyển Đổi:

var name = "Alice";
console.log("Hello, " + name + "!");

Q4. “$” không hoạt động vì jQuery xung đột với thư viện khác. Tôi nên làm gì?

A4. Bạn có thể tránh xung đột bằng cách sử dụng phương thức noConflict() của jQuery.

Ví dụ 1: Định Nghĩa Một Định Danh Mới Để Tránh Xung Đột

var jq = jQuery.noConflict();
jq('#element').text('Conflict resolved');

Q5. Có nên sử dụng “$” trong tên biến trong JavaScript không?

A5. Không có quy tắc nghiêm ngặt, nhưng bạn nên sử dụng một cách cẩn thận.

Ví dụ: Sử Dụng Tên Rõ Ràng Cho Một Định Danh

const $id = (id) => document.getElementById(id);
console.log($id('header').innerText);

Q6. Có những điểm quan trọng nào khi sử dụng template literal không?

A6. Có. Hãy chú ý các điểm sau.

1. Các trường hợp không cần escape

   console.log(`I'm Alice and I say "Hello!"`);
   

2. Nhúng biến và biểu thức một cách chính xác

   const isMember = true;
   console.log(`Status: ${isMember ? 'Active' : 'Inactive'}`);
   

3. Không hoạt động trên các trình duyệt cũ Template literal là tính năng của ES6, vì vậy chúng không được hỗ trợ trên các trình duyệt cũ.

Tóm Tắt

Trong phần này, chúng tôi đã đề cập đến các câu hỏi thường gặp và giải pháp liên quan đến “Cách sử dụng ‘$’ trong JavaScript”.

Trong phần tiếp theo, chúng tôi sẽ chuyển sang các ví dụ thực tế và giải thích cách “$” có thể được sử dụng trong các dự án thực tế.

8. Ví Dụ Thực Tế: Sử Dụng “$” trong Các Dự Án Thực Tế

8-1. Xây Dựng Bộ Lọc Tìm Kiếm Thời Gian Thực

Ví Dụ: Lọc Danh Sách

<input type="text" id="search" placeholder="Search...">
<ul id="list">
  <li>Apple</li>
  <li>Orange</li>
  <li>Grape</li>
  <li>Strawberry</li>
</ul>

$('#search').on('keyup', function() {
  const value = $(this).val().toLowerCase(); // Convert input to lowercase
  $('#list li').filter(function() {
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
  });
});

8-2. Chuyển Đổi Chế Độ Tối

Ví dụ: Nút Chuyển Đổi Chế Độ Tối

<button id="toggle-theme">Toggle Theme</button>

$('#toggle-theme').on('click', function() {
  $('body').toggleClass('dark-mode');
});

8-3. Hiển Thị Cửa Sổ Modal

Ví dụ: Triển Khai Cửa Sổ Modal

<button id="open-modal">Open Modal</button>
<div id="modal" style="display:none;">
  <div class="content">
    <p>This is a modal window.</p>
    <button id="close-modal">Close</button>
  </div>
</div>

$('#open-modal').on('click', function() {
  $('#modal').fadeIn();
});

$('#close-modal').on('click', function() {
  $('#modal').fadeOut();
});

8-4. Lấy Dữ Liệu Động Bằng Ajax

Ví dụ: Tải và Hiển Thị Dữ Liệu Danh Sách

<ul id="user-list"></ul>
<button id="load-data">Load Data</button>

$('#load-data').on('click', function() {
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/users',
    method: 'GET',
    success: function(data) {
      $('#user-list').empty(); // Clear the list
      data.forEach(user => {
        $('#user-list').append(`<li>${user.name}</li>`);
      });
    },
    error: function() {
      alert('Failed to fetch data.');
    }
  });
});

8-5. Kiểm Tra Biểu Mẫu Thời Gian Thực

Ví dụ: Kiểm Tra Địa Chỉ Email

<input type="email" id="email" placeholder="Email address">
<span id="error-message" style="color: red;"></span>

$('#email').on('input', function() {
  const email = $(this).val();
  const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  $('#error-message').text(isValid ? '' : 'Invalid email address.');
});

Tóm Tắt

Trong phần này, chúng tôi đã giới thiệu các ví dụ dự án thực tế sử dụng “$”.

Những ví dụ này hữu ích cho việc phát triển ứng dụng web thực tế, vì vậy bạn có thể tự do áp dụng chúng vào dự án của mình.

Trong phần tiếp theo, chúng tôi sẽ tóm tắt toàn bộ bài viết và tổng kết những điểm quan trọng về cách sử dụng “$”.

9. Kết Luận

9-1. Vai Trò Cơ Bản của “$”

• Một định danh JavaScript : “$” được coi là một định danh hợp lệ trong JavaScript, vì vậy có thể tự do sử dụng trong tên biến và tên hàm.
• Một ký hiệu trong jQuery : Trong jQuery, “$” được dùng như một ký hiệu giúp đơn giản hoá việc chọn và thao tác các phần tử.
• Nhúng biểu thức trong template literals : Trong template literals của ES6, bạn có thể nhúng các biến và biểu thức bằng “${}” .

9-2. Cách Sử Dụng Thực Tế

1. Làm việc với jQuery

• Nó giúp dễ dàng chọn các phần tử, đăng ký sự kiện và áp dụng các hiệu ứng động.

1. Sử dụng template literals một cách hiệu quả

• Chúng hữu ích cho việc tạo chuỗi động và nhúng các biểu thức phức tạp.

1. Áp dụng “$” trong các thư viện khác

• Các thư viện như Prototype.js và AngularJS cũng sử dụng “$” như một phần của chức năng của chúng.

9-3. Khắc Phục Sự Cố và Các Lưu Ý Quan Trọng

• Tránh xung đột : Nếu “$” gây xung đột giữa các thư viện, bạn có thể giải quyết bằng phương pháp noConflict() của jQuery.
• Tương thích trình duyệt : Template literals không được hỗ trợ trên các trình duyệt cũ, vì vậy nên sử dụng Babel để chuyển đổi mã của bạn.
• Mẹo gỡ lỗi : Sử dụng typeof $ để kiểm tra xem “$” đã được định nghĩa đúng chưa và xác định nguyên nhân gây lỗi.

9-4. Sử Dụng Các Ví Dụ Thực Tế

Thông qua các ví dụ dự án thực tế, chúng tôi đã giới thiệu các cách sử dụng “$” một cách hiệu quả.

• Bộ lọc tìm kiếm thời gian thực : Lọc danh sách dựa trên đầu vào của người dùng.
• Chuyển đổi chế độ tối : Thay đổi giao diện chỉ với một cú nhấp.
• Cửa sổ modal : Hiển thị giao diện dạng popup một cách động.
• Yêu cầu Ajax : Lấy dữ liệu từ máy chủ và cập nhật trang một cách động.
• Xác thực thời gian thực : Xác thực đầu vào của người dùng ngay lập tức và hiển thị thông báo lỗi.

9-5. Các bước tiếp theo

Sử dụng những gì bạn đã học trong bài viết này và thử viết mã tự mình. Các bước sau có thể giúp bạn hiểu sâu hơn:

1. Ôn lại các kiến thức cơ bản

• Xem lại các ví dụ đơn giản sử dụng jQuery và template literals.

1. Tùy chỉnh các ví dụ thực tế

• Áp dụng các tính năng lọc và xác thực vào dự án của bạn và cải thiện chúng theo cách riêng của bạn.

1. Thực hành khắc phục sự cố

• Cố ý tạo ra xung đột hoặc lỗi và kiểm tra các phương pháp khắc phục được giới thiệu trong bài viết này.

Ghi chú cuối cùng

Ký hiệu JavaScript “$” có thể trông đơn giản, nhưng nó linh hoạt và mạnh mẽ. Trong bài viết này, chúng tôi đã bao phủ mọi thứ từ vai trò cơ bản của nó đến các ví dụ thực tế.

Trong công việc phát triển tương lai, hãy áp dụng “$” để viết mã hiệu quả hơn và cải thiện cả khả năng đọc và khả năng bảo trì.

Đó là kết thúc của bài viết này. Hãy thử các ví dụ mã tự mình và hiểu sâu hơn!