웹 프론트엔드 JS 튜토리얼 JavaScript를 사용하여 한자를 병음으로 변환하는 예제에 대한 자세한 설명

JavaScript를 사용하여 한자를 병음으로 변환하는 예제에 대한 자세한 설명

May 22, 2017 am 11:54 AM

1. 한자를 병음으로 변환하는 현상

우선 한자를 병음으로 변환하려는 수요가 크다고 해야 할까요. 목적지와 같은 병음 문자로 연락처 정렬/필터링(티켓 구매 등 일반적)
병음 첫 글자로 분류 등 하지만 이 요구 사항에 대한 솔루션은 (특히 브라우저 측에서) 영리한 구현에 대해 들어본 적이 없으며 아마도 거대한 사전이 필요할 것입니다.
특히 JavaScript의 경우 github 및 npm을 확인하세요. 한자를 병음으로 변환하는 데 더 좋은 라이브러리에는 pinyin
과 pinyinjs가 포함되어 있습니다.
이러한 사전은 수십 또는 수백 KB(일부는 수 MB)인 경우가 많으며, 브라우저 측에서 사용하려면 여전히 용기가 필요합니다. 따라서 한자를 병음으로 변환해야 할 필요성에 직면했을 때 우리의 첫 반응이 요청을 거부하는 것(또는 서버 측에서 구현하는 것)이라는 것은 놀라운 일이 아닙니다.
이제 브라우저 측에서 300줄의 코드만으로 한자를 병음으로 변환할 수 있다고 하면 믿기지 않나요?

2. 안드로이드 4.2.2 연락처 코드부터

이 블로그를 다시 한번 강조합니다 - Android 소스 코드를 사용하여, 한자를 병음으로 쉽게 변환할 수 있습니다.
오늘은 안드로이드 시스템 소스코드에서 추출한 한자를 병음으로 변환하는 솔루션을 여러분과 공유하고자 합니다. 단 하나의 클래스와 560줄 이상의 코드만으로 한자를 병음으로 변환하는 기능을 쉽게 구현할 수 있습니다. 다른 제3자가 필요 없이 병음에 의존합니다.
당신의 생각이 무너졌나요? 사전을 버릴 수 있는 강력한 알고리즘이 있나요?
처음 블로그를 읽어보고는 안드로이드 코드에서 발견한 수백 줄의 코드만 소개하고 있어서 조금 실망했습니다. 두 번째로 코드를 자바스크립트로 포팅하겠다는 생각으로 읽다가 드디어 원리를 이해하게 되어서 포팅의 여정을 시작하게 되었습니다.

3. 한자를 병음으로 변환하는 JavaScript 코드 300줄을 단계별로 가르칩니다.

먼저 핵심으로 바로 들어가겠습니다. : 한자를 병음으로 변환하려면 왜 거대한 사고사전이 필요한가?
한자의 배열은 병음과 관계가 없기 때문에, 예를 들어 한자 간격 u4E00-u9FFF에서 전자는 하, 후자는 ze의 유니코드를 연관시킬 수 있는 방법이 없습니다. 병음이 ​​있는 한자는 하나만 있을 수 있다. 거대한 사전에는 각 한자(또는 흔히 사용하는 한자)의 병음을 기록하고 있다.
그러나 'A','AI','AN','ANG','AO','BA',...,'ZUI','와 같이 모든 한자를 병음별로 정렬할 수 있다고 가정해 보겠습니다. ZUN', 'ZUO' 정렬을 하면 동일한 병음으로 각 한자 대기열 의 첫 번째 한자만 기억하면 됩니다. 그러면 필요한 사전은 매우 작을 것입니다(병음만 모두 포함하면 병음 자체의 수는 많지 않습니다).
이제 어려운 부분은 한자를 병음별로 정렬하는 것입니다. 다행히 ICU/현지화 관련 API에서 이러한 정렬 API를 제공하고 있습니다(편리한 정렬/비교 방법이 없다면 이 글은 나오지 않을 수도 있습니다).

그래서 300줄을 사용하여 한자를 병음으로 변환할 수 있습니다. Intl.CollatorAPI: Intl.Collator는 현지화 관련 문자열 정렬을 내부적으로 구현합니다. Intl.Collator.prototype.compare를 통해 기본적으로 모든 한자를 병음에 따라 정렬할 수 있습니다.
경계 한자표 : 정렬된 경계점을 기록합니다. 이 한자 테이블의 각 한자는 정렬 후 동일한 병음이 있는 한자 집합의 첫 번째 한자입니다(Eachunihan은 collatoriszh_CN에서 동일한 병음이 있는 첫 번째 문자입니다).
그래도 아직 불명확한 부분이 있을 수 있으니 코드만 업로드하겠습니다.

관심 있으신가요? 학생 node--icu-data-dir=node_modules/full-icu 위의 script.js를 실행하여 살펴보고 기본적으로 병음으로 정렬된 한자 테이블을 얻을 수 있는지 확인할 수 있습니다.

다음은 몇 가지 참고 사항입니다.

한자 목록이 병음에 따라 완전히 정렬되지 않았기 때문에 "기본"을 다시 굵게 표시했습니다. 가끔 중간에 다른 병음이 삽입된 한자가 있기 때문에 경계를 만들 때 특별히 주의해야 합니다. 테이블.
위 스크립트에서 얻은 테이블은 모든 한자를 정렬한 것입니다. 그 중 일부는 Android 코드의 HanziToPinyin.java 테이블과 다르기 때문에 HanziToPinyin.java 테이블을 업데이트해야 합니다. (Java에서 JavaScript로 전환할 때 가장 큰 함정과 작업량: 경계 테이블 수정)
모두가 핵심 코드를 본 적이 있을 것이라고 믿습니다: constCOLLATOR=newIntl.Collator(['zh-Hans-CN']), Intl.Collator
(여기서 지정한 로케일은 중국 zh-Hans-CN) 은 한자를 병음순으로 정렬하는 키입니다. 문자열을 로케일별 순서로 정렬하는 국제화 API입니다.
스크립트를 실행할 때 먼저 npmifull-icu를 실행하세요. 이 종속성은 누락된 중국어 지원을 자동으로 설치하고 스크립트를 실행하기 위해 ICU 데이터 파일을 지정하는 방법을 묻는 메시지를 표시합니다.
1.ICUICU는 InternationalComponentsforUnicode를 의미하며 애플리케이션에 대한 유니코드 및 국제화 지원을 제공합니다.
ICU는 널리 사용되는 C/C++ 및 Java 라이브러리 세트로 소프트웨어 애플리케이션에 대한 유니코드 및 세계화 지원을 제공합니다. ICU는 널리 이식 가능하며 모든 플랫폼과 C/C++ 및 Java 소프트웨어 간에 동일한 결과를 애플리케이션에 제공합니다.
그리고 ICU는 지역화된 문자열 비교 서비스(유니코드 대조 알고리즘+로컬별 비교 규칙)를 제공합니다.
Col 관계: 특정 언어, 지역 또는 국가의 규칙 및 표준에 따라 문자열을 비교합니다. 정렬은 이러한 유형의 데이터에 대한 포괄적인 소스인 유니코드 조합 알고리즘과 공통 로컬 데이터 저장소의 로케일별 비교 규칙을 기반으로 합니다.
최신 브라우저에서 일반적으로 ICU는 사용자의 현지 언어에 대한 지원을 내장하고 있으며 이를 직접 사용할 수 있습니다.
그러나 node.js의 경우 일반적으로 ICU에는 하위 집합(보통 영어)만 포함되므로 중국어에 대한 지원을 직접 추가해야 합니다. 일반적으로 npminstallfull-icu를 통해 full-icu
를 설치하면 누락된 중국어 지원을 설치할 수 있습니다. (위의 node--icu-data-dir=node_modules/full-icu 참조).
2.IntlAPI 이전 섹션에서는 기본적으로 국제화/현지화에 관련된 지식을 설명해야 합니다. 여기서는 내장 API의 사용을 추가하겠습니다. 사용자 언어와 런타임이 이 언어를 지원하는지 확인하는 방법은 무엇입니까? Intl.Collator.supportedLocalesOf(array|string)
지원되는 로케일이 포함된 배열을 반환합니다(기본 로케일로 대체하지 않음). 매개 변수는 배열 또는 문자열일 수 있습니다. 테스트하려는 로케일(즉, BCP47언어태그)입니다.

Collator 객체를 구성하고 Intl.Collator.prototype을 통해 문자열

을 정렬합니다. , 언어에서 지정한 순서대로 문자열을 정렬할 수 있습니다. 중국어에서는 이 정렬이 주로 병음 순서로 이루어집니다. 'A', 'AI', 'AN', 'ANG', 'AO', 'BA', 'BAI', 'BAN' ,'BANG',' BAO','BEI','BEN','BENG','BI','BIAN','BIAO','BIE','BIN','BING','BO','BU','CA' ,'CAI','CAN',...
위에서 언급한 한자를 병음으로 변환하는 핵심입니다.

4. 경계 테이블 수정

당연히 이 경계 테이블에 문제가 있어 수정이 필요합니다.
대부분의 한자가 청으로 변환된 것을 볼 수 있는데, 청의 병음에 해당하는 한자에 문제가 있음을 알 수 있다.
이 한자를 찾았습니다. 'u72c5'/'狅'이고 앞뒤에 한 문자가 더해졌습니다. ['u4eb2','u72c5','u828e']/["情","狅","苎"]
.
을 검색하면 'u72c5'/'狅'이 qing으로 읽혀지는데, 지금은 kuang으로 읽혀지는 것이 오류의 원인이 될 것입니다.
모든 한자의 초기 정렬 목록에 따르면 청의 첫 번째 한자는 'u9751'/'靑'입니다.
변경 후 전환 실패 횟수는 104개뿐입니다.

【관련 추천】

1. Javascript 무료 동영상 튜토리얼

2. 자주 사용되는 js 정규식

3.

javascript를 통한 검색 툴바 구현의 자세한 예

4.

Javascript의 async 및 Wait에 대해 자세히 소개 사용법에

5. 자바스크립트에서 가장 실용적인 12가지 기술 공유

위 내용은 JavaScript를 사용하여 한자를 병음으로 변환하는 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? 프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? Apr 04, 2025 pm 02:42 PM

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? 누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? Apr 04, 2025 am 12:09 AM

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까? JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까? Apr 04, 2025 pm 05:09 PM

동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...

Demystifying JavaScript : 그것이하는 일과 중요한 이유 Demystifying JavaScript : 그것이하는 일과 중요한 이유 Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까? Console.log 출력 결과의 차이 : 두 통화가 다른 이유는 무엇입니까? Apr 04, 2025 pm 05:12 PM

Console.log 출력의 차이의 근본 원인에 대한 심층적 인 논의. 이 기사에서는 Console.log 함수의 출력 결과의 차이점을 코드에서 분석하고 그에 따른 이유를 설명합니다. � ...

초보자를위한 타이프 스크립트, 2 부 : 기본 데이터 유형 초보자를위한 타이프 스크립트, 2 부 : 기본 데이터 유형 Mar 19, 2025 am 09:10 AM

엔트리 레벨 타입 스크립트 자습서를 마스터 한 후에는 TypeScript를 지원하고 JavaScript로 컴파일하는 IDE에서 자신의 코드를 작성할 수 있어야합니다. 이 튜토리얼은 TypeScript의 다양한 데이터 유형으로 뛰어납니다. JavaScript에는 NULL, UNDEFINED, BOOLEAN, 번호, 문자열, 기호 (ES6에 의해 소개 됨) 및 객체의 7 가지 데이터 유형이 있습니다. TypeScript는이 기반으로 더 많은 유형을 정의 하며이 튜토리얼은이 모든 튜토리얼을 자세히 다룹니다. 널 데이터 유형 JavaScript와 마찬가지로 Null in TypeScript

Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까?
또는:
Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까? Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까? 또는: Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까? Apr 04, 2025 pm 05:36 PM

이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.

PowerPoint가 JavaScript를 실행할 수 있습니까? PowerPoint가 JavaScript를 실행할 수 있습니까? Apr 01, 2025 pm 05:17 PM

JavaScript는 PowerPoint에서 실행할 수 있으며 외부 JavaScript 파일을 호출하거나 VBA를 통해 HTML 파일을 포함시켜 구현할 수 있습니다. 1. VBA를 사용하여 JavaScript 파일을 호출하려면 매크로를 활성화하고 VBA 프로그래밍 지식이 있어야합니다. 2. JavaScript가 포함 된 HTML 파일을 포함시켜 간단하고 사용하기 쉽지만 보안 제한이 적용됩니다. 장점에는 확장 된 기능과 유연성이 포함되며, 단점에는 보안, 호환성 및 복잡성이 포함됩니다. 실제로 보안, 호환성, 성능 및 사용자 경험에주의를 기울여야합니다.

See all articles