Hướng dẫn chat emoji javascript - trò chuyện javascript biểu tượng cảm xúc

Nội phân Chính showShow

• 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
• Làm cách nào để đặt biểu tượng cảm xúc vào JavaScript?
• 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 tạo ra một biểu tượng cảm xúc trong html?
• Làm thế nào để bạn đặt biểu tượng cảm xúc trong mã?

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:

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

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

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

🍔

Làm cách nào để đặt biểu tượng cảm xúc vào JavaScript?

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 tạo ra một biểu tượng cảm xúc trong html?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:

🍔

Làm thế nào để bạn đặt biểu tượng cảm xúc trong mã?

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

Biểu tượng cảm xúc trong JavaScriptcodepoint) displayed:

Làm cách nào để đặt biểu tượng cảm xúc vào JavaScript?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:

🍔

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.

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:

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:

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.

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!

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 cách nào để đặt biểu tượng cảm xúc vào JavaScript?

Chỉ định CodePoint Emoji Thêm các ký tự &#x, xóa U+1 từ đầu 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.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.

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!

Làm thế nào để bạn tạo ra một biểu tượng cảm xúc trong html?

Biểu tượng cảm xúc có thể được chèn vào các tài liệu HTML bằng cách chỉ định Charset cho UTF-8 sẽ được sử dụng trong khi hiển thị các trang web trong trình duyệt. Thông tin mã hóa ký tự này được chỉ định bằng cách sử dụng thẻ trong phần đầu. Sau khi khai báo ký tự, biểu tượng cảm xúc có thể được thêm vào HTML bằng cách sử dụng và thẻ.by specifying charset to UTF-8 that will be used while displaying the web pages in the browser. This character encoding information is specified by using tag in the head section. After declaration of charset, emojis can be added in HTML by using

and tags.

Làm thế nào để bạn đặt biểu tượng cảm xúc trong mã?

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.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.