Hướng dẫn does javascript support emoji? - javascript có hỗ trợ biểu tượng cảm xúc không?

Nội dung chính Show

• Biểu tượng cảm xúc chính xác là gì?
• Sử dụng biểu tượng cảm xúc trực tiếp
• Chỉ định biểu tượng cảm xúc Codepoint
• Biểu tượng cảm xúc trong JavaScript
• Sự kết luận
• Làm thế nào để bạn thêm biểu tượng cảm xúc để phản ứng js?
• Làm thế nào để bạn thêm biểu tượng cảm xúc vào url của bạn?
• JavaScript có hỗ trợ biểu tượng cảm xúc không?
• Làm cách nào để đặt biểu tượng cảm xúc vào mã của tôi?

Bạn biết biểu tượng cảm xúc là gì! Tìm hiểu cách sử dụng chúng trong các tài liệu web của bạn như một chuyên gia.

Từ sự khởi đầu khiêm tốn của nó vào năm 1999, biểu tượng cảm xúc là tất cả những cơn thịnh nộ ngày nay. Nó không còn là thứ mà chỉ những người một nửa tuổi của chúng tôi sử dụng để giao tiếp. Bạn và tôi sử dụng chúng mọi lúc và hầu hết mọi ứng dụng liên quan đến trò chuyện hoặc liên quan đến nhắn tin dưới ánh mặt trời cung cấp hỗ trợ tuyệt vời cho nó:

Đối với người dùng hàng ngày, biểu tượng cảm xúc là tuyệt vời. Chúng rất vui và dễ sử dụng. Đối với các nhà phát triển web của Hoa Kỳ muốn sử dụng biểu tượng cảm xúc trong HTML, CSS và JavaScript của chúng tôi, câu chuyện hơi khác một chút. Có một vài vòng chúng ta cần học cách nhảy qua, nhưng đừng lo lắng. Hướng dẫn này sẽ giúp bạn thành thạo tất cả các bước nhảy hoop này như một người chuyên nghiệp!

Onwards!

Biểu tượng cảm xúc chính xác là gì?

Chúng ta đã biết rằng biểu tượng cảm xúc là những biểu tượng nhỏ màu này. Mặc dù điều này có thể cho bạn ấn tượng rằng chúng là hình ảnh theo nghĩa truyền thống, nhưng chúng không. Chúng giống như các chữ cái, số, dấu chấm câu và các biểu tượng kỳ lạ mà chúng ta có xu hướng xô làm văn bản:

Đến cuối hướng dẫn này, tôi đi sâu vào chi tiết hơn về biểu tượng cảm xúc và một số chi tiết dưới vỏ bọc khiến chúng hoạt động. Bây giờ, chỉ cần biết những điều sau đây:

1. Họ chỉ là nhân vật
2. Bạn có thể chọn chúng, sao chép chúng, dán chúng, điều chỉnh kích thước của chúng, v.v.
3. Họ có một biểu diễn số nguyên thủy hơn mà bạn có thể sử dụng để hiển thị chúng

Để nói rằng chúng tôi chỉ cào lên bề mặt trong việc hiểu biểu tượng cảm xúc là một sự quá mức, nhưng điều này là đủ để chúng tôi bắt đầu. Đã đến lúc thấy biểu tượng cảm xúc trong hành động bên trong các tài liệu web của chúng tôi!

Để sử dụng biểu tượng cảm xúc trong HTML, điều đầu tiên chúng ta cần làm là đặt mã hóa ký tự của tài liệu thành UTF-8. Điều này đảm bảo màn hình biểu tượng cảm xúc của chúng tôi liên tục trên nhiều trình duyệt và thiết bị mà người dùng của bạn có thể đang chạy. Làm điều này là đơn giản. Bên trong thẻ đầu của bạn, hãy chắc chắn chỉ định thẻ meta sau:head tag, be sure to specify the following meta tag:

<meta charset="UTF-8">

Khi bạn đã thực hiện điều này, bây giờ là phần thú vị của việc thực sự nhận được biểu tượng cảm xúc để hiển thị. Bạn có hai cách để có thể làm điều này, mỗi cách có một mức độ vui vẻ khác nhau. Một cách là bằng cách sử dụng biểu tượng cảm xúc trực tiếp trong HTML của bạn. Một cách khác là bằng cách chỉ định biểu tượng cảm xúc thông qua biểu diễn số nguyên thủy của nó. Chúng tôi sẽ xem xét cả hai trường hợp này.

Sử dụng biểu tượng cảm xúc trực tiếp

Cách dễ nhất để hiển thị biểu tượng cảm xúc liên quan đến việc sao chép và dán. Bạn chỉ cần một ứng dụng hoặc trang web cho phép bạn sao chép biểu tượng cảm xúc ở dạng ký tự, bản địa của họ. Một nơi tuyệt vời để làm điều đó là biểu tượng cảm xúc. Bạn có thể sử dụng biểu tượng cảm xúc để tìm kiếm hoặc duyệt cho bất kỳ biểu tượng cảm xúc nào bạn đang tìm kiếm. Khi bạn đã tìm thấy biểu tượng cảm xúc của mình, có một phần mà bạn có thể dễ dàng nhìn thấy và sao chép biểu tượng cảm xúc:

Khi bạn đã sao chép nó, chỉ cần dán nó vào đích dự định của nó trong đánh dấu của bạn:

<p>🍔</p>

Bởi vì biểu tượng cảm xúc được coi là nội dung dựa trên văn bản, bạn có thể dán chúng ở hầu hết mọi nơi trong tài liệu của bạn nơi văn bản được hỗ trợ. Bây giờ, nếu đây là lần đầu tiên bạn thấy biểu tượng cảm xúc xuất hiện ngẫu nhiên bên trong mã dựa trên văn bản hoặc trình chỉnh sửa mã của bạn, nó sẽ trông hơi lạ:

Môi trường chỉ có văn bản truyền thống của bạn, nơi bạn đã viết đánh dấu của bạn trong suốt những năm qua sẽ đột nhiên có một cái gì đó trực quan trong đó. Đừng lo. Nó tuyệt thật. Khi bạn xem trước tài liệu HTML của mình trong trình duyệt, mọi thứ vẫn sẽ hoạt động.

Trước khi chúng ta kết thúc cái nhìn của chúng ta về biểu tượng cảm xúc trong HTML, hãy nói về khả năng tiếp cận. Biểu tượng cảm xúc cuối cùng là các tạo tác thị giác, nhưng chúng được thể hiện dưới dạng văn bản dưới các bìa sử dụng các yếu tố như P và Span không rõ ràng về mặt ngữ nghĩa trong trường hợp này. Trình đọc màn hình và các công cụ liên quan có thể không diễn giải những gì biểu tượng cảm xúc đang cố gắng biểu thị đúng, nhưng giải pháp rất đơn giản. Để sử dụng biểu tượng cảm xúc trong khả năng truy cập (a11y như những đứa trẻ tuyệt vời gọi nó là!)p and span that are semantically ambiguous in this case. Screen readers and related tools may not interpret what the emoji is trying to signify properly, but the solution is simple. To use emojis in an accessibility (a11y as the cool kids call it!) friendly way, set the role and aria-label attributes on the element that you are using to reprsent your emoji:

<p role="img" aria-label="hamburger">🍔</p>

Với sự thay đổi này, bạn vẫn có thể sử dụng biểu tượng cảm xúc trong HTML và được truy cập cùng một lúc. Đó là một chiến thắng, chiến thắng, ... thắng! Cảm ơn Eva Larumbe đã chỉ ra điều này.

Chỉ định biểu tượng cảm xúc Codepoint

Nếu chỉ định biểu tượng cảm xúc trực tiếp không hoạt động, có một con đường ít thú vị hơn bạn có thể đi. Bạn có thể sử dụng biểu diễn số của biểu tượng cảm xúc và chỉ định nó trong đánh dấu của bạn thay thế. Nếu bạn cuộn xuống trong biểu tượng cảm xúc cho bất kỳ biểu tượng cảm xúc nào, bạn sẽ thấy biểu diễn số (được gọi chính thức hơn là CodePoint) được hiển thị:codepoint) displayed:codepoint) displayed:

Đối với biểu tượng cảm xúc hamburger, CodePoint là U+1F354. Để chỉ định biểu tượng cảm xúc này trong HTML bằng cách sử dụng CodePoint, chúng ta phải sửa đổi giá trị một chút. Thêm các ký tự &#x, xóa U+1 từ đầu của CodePoint và chỉ cần thêm các chữ số còn lại khỏi CodePoint như một phần của bất kỳ phần tử văn bản nào.U+1F354. To specify this emoji in HTML using the codepoint, we have to modify the value a bit. Add the &#x characters, remove the U+1 from the beginning of the codepoint, and just add the remaining digits from the codepoint as part of any text element.U+1F354. To specify this emoji in HTML using the codepoint, we have to modify the value a bit. Add the &#x characters, remove the U+1 from the beginning of the codepoint, and just add the remaining digits from the codepoint as part of any text element.

Đây là biểu tượng cảm xúc hamburger của chúng tôi ở dạng Codepoint:

<p>&#x1F354</p>

Khi bạn xem trước tài liệu của mình trong trình duyệt, bạn vẫn sẽ thấy biểu tượng cảm xúc hamburger được hiển thị chính xác ... mặc dù nó trông lạ trong đánh dấu của chúng tôi so với giải pháp sao chép/dán mà chúng tôi đã xem trước đó.

Biểu tượng cảm xúc trong CSS

Bạn hoàn toàn có thể sử dụng biểu tượng cảm xúc trong CSS. Những thủ thuật tương tự chúng tôi đã thấy cho biểu tượng cảm xúc trong HTML sẽ chỉ hoạt động với một số sửa đổi nhỏ. Bạn có thể chỉ định biểu tượng cảm xúc trực tiếp:

h2::before  {
  content: "🍔";
}

Bạn cũng có thể chỉ định biểu tượng cảm xúc bằng cách đặt CodePoint:

h2::before  {
  content: "\01F354";
}

Cách bạn chỉ định CodePoint khác một chút so với những gì chúng tôi thấy đối với HTML. Tất cả những gì bạn phải làm là xóa U+ khỏi điểm cuối Unicode và thêm các ký tự \ 0 (chém 0) ngay trước nó.U+ from the unicode endpoint and add the \0 (slash zero) characters just before it.U+ from the unicode endpoint and add the \0 (slash zero) characters just before it.

Biểu tượng cảm xúc trong JavaScript

Điều cuối cùng chúng ta sẽ xem xét là làm thế nào để sử dụng biểu tượng cảm xúc trong JavaScript. Cách tiếp cận sử dụng nó trực tiếp cũng sẽ hoạt động ở đây. Chỉ cần đảm bảo coi biểu tượng cảm xúc là văn bản:

document.body.innerText = "😀";

Để sử dụng biểu tượng cảm xúc thông qua giá trị CodePoint của nó, chúng ta phải chuyển chúng qua phương thức String.FromCodepoint. Phương thức này lấy giá trị CodePoint làm đối số của nó:String.fromCodePoint method. This method takes a codepoint value as its argument:String.fromCodePoint method. This method takes a codepoint value as its argument:

document.body.innerText = String.fromCodePoint(0x1F354);

Những gì được trả lại là ký tự tại vị trí CodePoint đó. Cách bạn chỉ định CodePoint khác với cả HTML và CSS. Nếu CodePoint là U+ 1F354, hãy thay thế U+ bằng 0x (0 và X) trước khi chuyển nó vào. Đó là nó. Nếu bạn muốn đi xa hơn, vì bạn đang ở JavaScript, bạn có thể thực hiện tất cả các loại JavaScripty. Bạn có thể có một mảng biểu tượng cảm xúc, bạn có thể tạo ra chúng một cách tự động, v.v.U+1F354, replace the U+ with 0x (zero and x) before passing it in. That's it. If you want to go further, since you are in JavaScript, you can do all sorts of JavaScripty things. You can have an array of emojis, you can dynamically generate them, and so on:U+1F354, replace the U+ with 0x (zero and x) before passing it in. That's it. If you want to go further, since you are in JavaScript, you can do all sorts of JavaScripty things. You can have an array of emojis, you can dynamically generate them, and so on:

let emojis = [0x1F600, 0x1F604, 0x1F34A, 0x1F344, 0x1F37F, 0x1F363, 0x1F370, 0x1F355,
              0x1F354, 0x1F35F, 0x1F6C0, 0x1F48E, 0x1F5FA, 0x23F0, 0x1F579, 0x1F4DA,
              0x1F431, 0x1F42A, 0x1F439, 0x1F424];

Nếu bạn tò mò muốn thấy một ví dụ hoạt động sử dụng biểu tượng cảm xúc được xác định trong JavaScript, hãy xem trò chơi Koncentration của tôi. Repo GitHub (đặc biệt là board.js) chứa mọi thứ bạn cần để xem trò chơi được gắn với nhau như thế nào.

Một số chi tiết biểu tượng cảm xúc

Chúng tôi đã che giấu những gì biểu tượng cảm xúc thực sự là gì và mục đích mà CodePoints phục vụ. Để bắt đầu từ những gì chúng tôi đã nói trước đó, biểu tượng cảm xúc chỉ là những nhân vật như tất cả các văn bản mà chúng tôi gõ. Đó thường là một điều khó hiểu để hiểu. Một phần lý do cho sự nhầm lẫn này là vì chúng ta có xu hướng nghĩ về các nhân vật như những gì bàn phím của chúng ta hỗ trợ. Đây là vấn đề: Những gì bàn phím của chúng tôi cho phép chúng tôi đại diện là một tỷ lệ rất nhỏ trong tổng số các ký tự có sẵn cho chúng tôi.What our keyboards allow us to represent is a very tiny percentage of the overall set of characters that is available to us.What our keyboards allow us to represent is a very tiny percentage of the overall set of characters that is available to us.

Nếu bạn muốn tự mình xem cái này, bạn có thể thấy tất cả các ký tự mà hệ điều hành của bạn hỗ trợ bằng cách sử dụng bản đồ ký tự trên Windows hoặc Trình xem ký tự trên Mac:

Lưu ý rằng bạn có nhiều loại ký tự vượt ra ngoài những điều thông thường mà chúng ta thấy trên bàn phím điển hình. Nếu chúng tôi phải có một bàn phím để hỗ trợ mọi nhân vật mà hệ điều hành của chúng tôi hỗ trợ, thì nó sẽ cần ít nhất ... lớn hơn ba lần so với bàn phím thông thường.

Được! Hãy đi sâu hơn một cấp. Chúng tôi thấy rằng biểu tượng cảm xúc mà chúng tôi muốn sử dụng có một đại diện số kỳ quái. Hóa ra, tất cả các ký tự chúng ta sử dụng cũng có cùng một đại diện kỳ ​​quái dưới các bìa. Trên màn hình của chúng tôi, chúng tôi có thể thấy các ký tự chữ cái như A, B, C, D, E, F, G. Theo bìa, các ký tự này trông giống như sau: U+0041, U+0042, U+0043, U+0044 , U+0045, U+0046 và U+0047. Chúng tôi đã nói rằng đại diện này được gọi là CodePoint, nhưng thuật ngữ chính xác hơn là Unicode CodePoint. Chi tiết này rất quan trọng để biết, vì Unicode là một tiêu chuẩn công nghiệp để đảm bảo văn bản bạn thấy trên màn hình của bạn giống nhau trên một màn hình khác ở một nơi khác - bất kể ngôn ngữ, địa phương, khả năng hệ thống, hệ điều hành, v.v. Codepoint là đơn vị cơ bản nhất của việc thể hiện thông tin trong Unicode. Một loạt các CodePoint đại diện cho các ký tự và văn bản. Phew!A, B, C, D, E, F, G. Under the covers, these characters look like the following: U+0041, U+0042, U+0043, U+0044, U+0045, U+0046, and U+0047. We already said that this representation is known as a codepoint, but the more precise term is Unicode codepoint. This detail is important to know about, for Unicode is an industry standard for ensuring the text you see on your screen is the same on another screen somewhere else - regardless of language, locale, system capabilities, operating system, and so on. A codepoint is the most basic unit of representing information in Unicode. A series of codepoints represents characters and text. Phew!A, B, C, D, E, F, G. Under the covers, these characters look like the following: U+0041, U+0042, U+0043, U+0044, U+0045, U+0046, and U+0047. We already said that this representation is known as a codepoint, but the more precise term is Unicode codepoint. This detail is important to know about, for Unicode is an industry standard for ensuring the text you see on your screen is the same on another screen somewhere else - regardless of language, locale, system capabilities, operating system, and so on. A codepoint is the most basic unit of representing information in Unicode. A series of codepoints represents characters and text. Phew!

Sự kết luận

Nếu bạn có thể thoát khỏi nó, việc sao chép và dán biểu tượng cảm xúc là điều dễ nhất bạn có thể làm trên HTML, CSS và JavaScript. Sẽ có những tình huống mà bạn không thể làm điều đó, vì vậy bạn cách tiếp cận dự phòng liên quan đến CodePoints. Có một điều cuối cùng có thể quan trọng đối với bạn. Bởi vì biểu tượng cảm xúc có nguồn gốc từ ứng dụng hoặc nền tảng bạn đang sử dụng, biểu tượng cảm xúc có thể trông khác nhau đối với những người dùng khác nhau:

Tiêu chuẩn Unicode đảm bảo rằng các điểm codepoint thích hợp, trong trường hợp này là một con mèo. Mỗi người thực hiện có tự do sáng tạo hoàn toàn trong việc giải thích điều đó như họ muốn. Đối với một số nhà phát triển, sự không nhất quán này không phải là mong muốn. Thay vào đó, những gì họ đã làm là tạo lại biểu tượng cảm xúc ở dạng SVG hoặc PNG để họ có thể đảm bảo tính nhất quán. Một ví dụ về một người làm điều đó là Twitter! Chúng tôi đã sử dụng ảnh chụp màn hình cảm xúc của họ để bắt đầu hướng dẫn này ngay từ đầu và mọi biểu tượng cảm xúc mà bạn thấy không có từ hệ điều hành hoặc nền tảng của chúng tôi. Đó là từ dự án twemoji thực sự tuyệt vời. Có nhiều thư viện biểu tượng cảm xúc ngoài kia mà bạn có thể sử dụng, vì vậy hãy sử dụng bất cứ thứ gì bạn thích nếu hỗ trợ biểu tượng cảm xúc bản địa không phải là thứ bạn đang tìm kiếm.

Làm thế nào để bạn thêm biểu tượng cảm xúc để phản ứng js?

Để đưa nó vào các phụ thuộc của bạn, chỉ cần chạy NPM I Emoji-Picker-React. Nó cung cấp một tùy chọn thả xuống cho biểu tượng cảm xúc bạn muốn chọn. Một bộ chọn thả xuống biểu tượng cảm xúc được tìm thấy ở đây. Gói NPM không sử dụng móc phản ứng, vì vậy bạn sẽ cần sử dụng React 16.8 trở lên!run npm i emoji-picker-react . It offers a dropdown option for the emoji you want to choose. An emoji dropdown selector found here. The npm package does use React Hooks, so you will need to use React 16.8 or higher!run npm i emoji-picker-react . It offers a dropdown option for the emoji you want to choose. An emoji dropdown selector found here. The npm package does use React Hooks, so you will need to use React 16.8 or higher!

Làm thế nào để bạn thêm biểu tượng cảm xúc vào url của bạn?

Đây là cách nó hoạt động:...

Dán url dài của bạn vào cửa sổ bật lên, giống như bạn đã làm khi tạo một liên kết có nhãn hiệu tiêu chuẩn ..

Chọn miền duy nhất của bạn và trong hộp thẻ chém, nhấn Control + Command (Alt) + Shift để bàn phím biểu tượng cảm xúc bật lên ..

Chọn biểu tượng cảm xúc phù hợp nhất với bài đăng của bạn ..

JavaScript có hỗ trợ biểu tượng cảm xúc không?

Đúng rồi;Bạn có thể phù hợp với các ký hiệu tiền tệ, ký tự không phải là latin, và, bạn đoán nó, biểu tượng cảm xúc!Nếu bạn muốn thay thế và thay đổi biểu tượng cảm xúc trong các chuỗi JavaScript, bạn có thể làm điều đó với chuỗi.Thay thế, quá.you can match currency symbols, non-Latin characters, and, you guessed it, Emojis! If you want to replace and alter Emojis in JavaScript strings, you can do that with String. replaceAll , too.you can match currency symbols, non-Latin characters, and, you guessed it, Emojis! If you want to replace and alter Emojis in JavaScript strings, you can do that with String. replaceAll , too.

Làm cách nào để đặt biểu tượng cảm xúc vào mã của tôi?

Chỉ cần cài đặt tiện ích mở rộng từ Thị trường mã VS, Ctrl+Shift+P để mở bảng lệnh của bạn và chọn chọn Emoji. Tìm kiếm cảm xúc của bạn và nhấp vào biểu tượng cảm xúc bạn muốn sử dụng sau đó Ctrl+V để dán nó ở nơi bạn muốn.Cuối cùng, ngồi lại và xem mã của bạn trở nên sống động.Ctrl+Shift+P to open your command palette and choose Select Emoji.Search your emoji and click the emoji you want to use then Ctrl+V to paste it where you want. Finally, sit back and watch your code come to life.Ctrl+Shift+P to open your command palette and choose Select Emoji. Search your emoji and click the emoji you want to use then Ctrl+V to paste it where you want. Finally, sit back and watch your code come to life.