Karmaşık emojiler içeren bir dizeyi nasıl ters çevirebilirim?

Giriş:

Hello world👩‍🦰👩‍👩‍👦‍👦

Istenilen çıktı:

👩‍👩‍👦‍👦👩‍🦰dlrow olleH

Birkaç yaklaşım denedim ama hiçbiri bana doğru cevabı vermedi.

Bu sefil bir şekilde başarısız oldu:

const text = 'Hello world👩‍🦰👩‍👩‍👦‍👦';

const reversed = text.split('').reverse().join('');

console.log(reversed);

Bu tür çalışır, ancak 👩‍👩‍👦‍👦4 farklı emojiye ayrılır:

const text = 'Hello world👩‍🦰👩‍👩‍👦‍👦';

const reversed = [...text].reverse().join('');

console.log(reversed);

Ben de bu sorudaki her cevabı denedim ama hiçbiri işe yaramıyor.

İstenilen çıktıyı elde etmenin bir yolu var mı?

Yapabiliyorsanız_.split() , lodash tarafından sağlanan işlevi kullanın . Gönderen sürümü 4.0 itibaren, _.split()bölme unicode emoji'yi yeteneğine sahiptir.

.reverse().join('')Yerlileri 'karakterleri' tersine çevirmek için kullanmak, sıfır genişlikli birleştiriciler içeren emojilerde gayet iyi çalışmalıdır.

function reverse(txt) { return _.split(txt, '').reverse().join(''); }

const text = 'Hello world👩‍🦰👩‍👩‍👦‍👦';
console.log(reverse(text));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>

TKoL'nin \u200dkarakteri kullanma fikrini aldım ve daha küçük bir komut dosyası oluşturmaya çalışmak için kullandım.

Not: Tüm kompozisyonlar sıfır genişlikte bir birleştirici kullanmaz, bu nedenle diğer kompozisyon karakterleriyle hatalı olacaktır.

Geleneksel fordöngüyü kullanır çünkü birleşik ifadeler bulmamız durumunda bazı yinelemeleri atlarız. forDöngü içinde whileaşağıdaki \u200dkarakterin olup olmadığını kontrol etmek için bir döngü vardır . Bir tane olduğu sürece, sonraki 2 karakteri de ekleriz ve fordöngüyü 2 yineleme ile iletiriz, böylece birleşik ifadeler tersine çevrilmez.

Herhangi bir dizede kolayca kullanmak için, dizge nesnesinde yeni bir prototip işlevi olarak yaptım.

String.prototype.reverse = function() {
  let textArray = [...this];
  let reverseString = "";

  for (let i = 0; i < textArray.length; i++) {
    let char = textArray[i];
    while (textArray[i + 1] === '\u200d') {
      char += textArray[i + 1] + textArray[i + 2];
      i = i + 2;
    }
    reverseString = char + reverseString;
  }
  return reverseString;
}

const text = "Hello world👩‍🦰👩‍👩‍👦‍👦";

console.log(text.reverse());

//Fun fact, you can chain them to double reverse :)
//console.log(text.reverse().reverse());

Unicode metnini ters çevirmek, birçok nedenden dolayı zordur.

İlk olarak, programlama diline bağlı olarak, dizeler bir bayt listesi, UTF-16 kod birimleri listesi (16 bit genişliğinde, API'de genellikle "karakterler" olarak adlandırılır) veya ucs4 kod noktaları olarak farklı şekillerde temsil edilir. (4 bayt genişliğinde).

İkinci olarak, farklı API'ler bu iç gösterimi farklı derecelerde yansıtır. Bazıları baytların soyutlanması, bazıları UTF-16 karakterleri, bazıları kod noktaları üzerinde çalışır. Gösterim bayt veya UTF-16 karakterleri kullandığında, genellikle API'nin bu temsilin öğelerine erişim sağlayan bölümleri ve baytlardan (UTF-8 aracılığıyla) veya baytlardan almak için gerekli mantığı gerçekleştiren bölümleri vardır. UTF-16 karakterlerini gerçek kod noktalarına.

Genellikle, API'nin bu mantığı gerçekleştiren ve böylece kod noktalarına erişmenizi sağlayan bölümleri daha sonra eklenmiştir, çünkü ilk önce 7 bit ascii vardı, sonra biraz sonra herkes farklı kod sayfaları kullanarak 8 bitin yeterli olduğunu düşündü ve hatta daha sonra 16 bit unicode için yeterliydi. Sabit bir üst sınırı olmayan tamsayı sayıları olarak kod noktaları kavramı, geçmişte, metni mantıksal olarak kodlamak için dördüncü ortak karakter uzunluğu olarak eklenmiştir.

Gerçek kod noktalarına erişmenizi sağlayan bir API kullanmak bu kadar görünüyor. Fakat...

Üçüncüsü, bir sonraki kod noktasını veya aşağıdaki kod noktalarını etkileyen çok sayıda değiştirici kod noktası vardır. Örneğin, aşağıdaki a'yı ä, e'den ë'ye & c'ye çeviren bir aksan değiştirici var. Kod noktalarını ters çevirin ve aë, farklı harflerden oluşan eä olur. Örneğin, kendi kod noktası olarak ä'nın doğrudan bir temsili vardır, ancak değiştiriciyi kullanmak da aynı derecede geçerlidir.

Dördüncüsü, her şey sürekli akış halindedir. Örnekte kullanıldığı gibi emoji arasında birçok değiştirici vardır ve her yıl yenileri eklenmektedir. Bu nedenle, bir API, bir kod noktasının bir değiştirici olup olmadığına ilişkin bilgilere erişmenizi sağlarsa, API'nin sürümü, belirli bir yeni değiştiriciyi zaten bilip bilmediğini belirleyecektir.

Unicode, yalnızca görsel görünümle ilgili olduğu zaman için bir hile sağlar:

Yazı yönü değiştiricileri var. Örnek durumunda, soldan sağa yazma yönü kullanılır. Metnin başına bir sağdan sola yazma yönü değiştiricisi ekleyin ve API / tarayıcının sürümüne bağlı olarak doğru şekilde tersine çevrilmiş görünecektir 😎

"\ u202e", sağdan sola geçersiz kılma olarak adlandırılır, sağdan sola işaretçinin en güçlü sürümüdür.

W3.org tarafından hazırlanan bu açıklamaya bakın

const text = 'Hello world👩‍🦰👩‍👩‍👦‍👦'
console.log('\u202e' + text)

const text = 'Hello world👩‍🦰👩‍👩‍👦‍👦'
let original = document.getElementById('original')
original.appendChild(document.createTextNode(text))
let result = document.getElementById('result')
result.appendChild(document.createTextNode('\u202e' + text))

body {
  font-family: sans-serif
}

<p id="original"></p>
<p id="result"></p>

Biliyorum! RegExp kullanacağım. Ne ters gidebilir? (Okuyucu için alıştırma olarak soldaki cevap.)

const text = 'Hello world👩‍🦰👩‍👩‍👦‍👦';

const reversed = text.match(/.(\u200d.)*/gu).reverse().join('');

console.log(reversed);

Alternatif çözüm, runeskitaplık kullanmak olabilir , küçük ama etkili bir çözüm:

https://github.com/dotcypress/runes

const runes = require('runes')

// String.substring
'👨‍👨‍👧‍👧a'.substring(1) => '�‍👨‍👧‍👧a'

// Runes
runes.substr('👨‍👨‍👧‍👧a', 1) => 'a'

runes('12👩‍👩‍👦‍👦3🍕✓').reverse().join(); 
// results in: "✓🍕3👩‍👩‍👦‍👦21"

Sadece emoji ile değil, aynı zamanda diğer kombinasyon karakterleriyle de sorun yaşıyorsunuz. Tek tek harfler gibi hissettiren, ancak aslında bir veya daha fazla unicode karakter olan bu şeylere "genişletilmiş grafik kümeleri" denir.

Bir dizeyi bu kümelere bölmek zordur (örneğin, bu unicode belgelerine bakın ). Kendim uygulamaya güvenmek yerine mevcut bir kütüphaneyi kullanırım. Google beni grapheme-splitter kitaplığına işaret etti. Bu kitaplığın belgeleri, çoğu uygulamayı tetikleyecek bazı güzel örnekler içerir :

Bunu kullanarak şunları yazabilmelisin:

var splitter = new GraphemeSplitter();
var graphemes = splitter.splitGraphemes(string);
var reversed = graphemes.reverse().join('');

YANINDE: Gelecekten gelen ziyaretçiler veya kanamanın eşiğinde yaşamaya istekli olanlar için:

JavaScript standardına bir grafik segmenter eklemek için bir teklif var . (Aslında başka bölümleme seçenekleri de sağlar). Şu anda kabul için aşama 3 incelemesinde ve şu anda JSC ve V8'de uygulanmaktadır (bkz. Https://github.com/tc39/proposal-intl-segmenter/issues/114 ).

Bunu kullanarak kod şöyle görünür:

var segmenter = new Intl.Segmenter("en", {granularity: "grapheme"})
var segment_iterator = segmenter.segment(string)
var graphemes = []
for (let {segment} of segment_iterator) {
    graphemes.push(segment)
}
var reversed = graphemes.reverse().join('');

Benden daha modern bir javascript biliyorsanız, muhtemelen bunu daha düzgün yapabilirsiniz ...

Burada bir uygulama var - ama ne gerektirdiğini bilmiyorum.

Not: Bu, diğer yanıtların henüz ele alınmadığı eğlenceli bir soruna işaret etmektedir. Segmentasyon, yalnızca dizedeki karakterlere değil, kullandığınız yerel ayara bağlı olabilir.

Sadece eğlence için yapmaya karar verdim, iyi bir meydan okumaydı. Her durumda doğru olduğundan emin değilsiniz, bu yüzden kendi sorumluluğunuzda kullanın, ancak işte burada:

function run() {
    const text = 'Hello world👩‍🦰👩‍👩‍👦‍👦';
    const newText = reverseText(text);
    console.log(newText);
}

function reverseText(text) {
    // first, create an array of characters
    let textArray = [...text];
    let lastCharConnector = false;
    textArray = textArray.reduce((acc, char, index) => {
        if (char.charCodeAt(0) === 8205) {
            const lastChar = acc[acc.length-1];
            if (Array.isArray(lastChar)) {
                lastChar.push(char);
            } else {
                acc[acc.length-1] = [lastChar, char];
            }
            lastCharConnector = true;
        } else if (lastCharConnector) {
            acc[acc.length-1].push(char);
            lastCharConnector = false;
        } else {
            acc.push(char);
            lastCharConnector = false;
        }
        return acc;
    }, []);
    
    console.log('initial text array', textArray);
    textArray = textArray.reverse();
    console.log('reversed text array', textArray);

    textArray = textArray.map((item) => {
        if (Array.isArray(item)) {
            return item.join('');
        } else {
            return item;
        }
    });

    return textArray.join('');
}

run();

Kullanabilirsiniz:

yourstring.split('').reverse().join('')

Dizinizi bir listeye dönüştürmeli, ters çevirmeli ve sonra tekrar dizgiye dönüştürmelidir.

const text = 'Merhaba dünya👩‍🦰👩‍👩‍👦‍👦';

const tersine çevrildi = metin.split (''). ters (). birleştir ('');

console.log (tersine çevrilmiş);