จะย้อนกลับสตริงที่มีอิโมจิที่ซับซ้อนได้อย่างไร?

อินพุต:

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

ผลลัพธ์ที่ต้องการ:

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

ฉันลองใช้หลายวิธี แต่ไม่มีคำตอบที่ถูกต้อง

สิ่งนี้ล้มเหลว:

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

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

console.log(reversed);

วิธีนี้ใช้งานได้ แต่แบ่ง👩‍👩‍👦‍👦ออกเป็น 4 อิโมจิที่แตกต่างกัน:

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

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

console.log(reversed);

ฉันยังลองทุกคำตอบในคำถามนี้แต่ไม่มีข้อใดได้ผล

มีวิธีที่จะได้ผลลัพธ์ที่ต้องการหรือไม่?

หากคุณสามารถที่จะใช้_.split()ฟังก์ชั่นให้โดยlodash ตั้งแต่เวอร์ชัน 4.0เป็นต้นไป_.split()สามารถแยกอิโมจิแบบ Unicode ได้

การใช้เนทีฟ.reverse().join('')เพื่อย้อนกลับ "อักขระ" ควรใช้ได้ดีกับอิโมจิที่มีตัวเชื่อมความกว้างเป็นศูนย์

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 ในการใช้\u200dอักขระและใช้เพื่อพยายามสร้างสคริปต์ที่เล็กลง

หมายเหตุ: การแต่งเพลงบางรายการไม่ได้ใช้ตัวเชื่อมความกว้างเป็นศูนย์ดังนั้นมันจะมีปัญหากับตัวละครอื่น ๆ

มันใช้การforวนซ้ำแบบเดิมเพราะเราข้ามการทำซ้ำบางอย่างในกรณีที่เราพบอีโมติคอนรวมกัน ภายในforลูปมีwhileลูปเพื่อตรวจสอบว่ามี\u200dอักขระต่อไปนี้หรือไม่ ตราบใดที่ยังมีอีกหนึ่งตัวเราก็เพิ่มอักขระ 2 ตัวถัดไปด้วยและส่งต่อforลูปด้วยการวนซ้ำ 2 ครั้งดังนั้นอีโมติคอนที่รวมกันจะไม่ย้อนกลับ

เพื่อให้ใช้งานได้อย่างง่ายดายกับสตริงใด ๆ ฉันทำให้มันเป็นฟังก์ชันต้นแบบใหม่บนวัตถุสตริง

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 นั้นยุ่งยากด้วยเหตุผลหลายประการ

ขั้นแรกขึ้นอยู่กับภาษาการเขียนโปรแกรมสตริงจะแสดงในรูปแบบต่างๆไม่ว่าจะเป็นรายการไบต์รายการหน่วยรหัส UTF-16 (กว้าง 16 บิตมักเรียกว่า "อักขระ" ใน API) หรือเป็นจุดรหัส ucs4 (กว้าง 4 ไบต์)

ประการที่สอง API ที่แตกต่างกันสะท้อนให้เห็นถึงการเป็นตัวแทนภายในในระดับต่างๆ บางส่วนทำงานกับสิ่งที่เป็นนามธรรมของไบต์บางตัวใช้อักขระ UTF-16 บางตัวใช้จุดโค้ด เมื่อการแทนค่าใช้ไบต์หรืออักขระ UTF-16 มักจะมีส่วนของ API ที่ให้คุณเข้าถึงองค์ประกอบของการแสดงนี้รวมถึงส่วนที่ดำเนินการตรรกะที่จำเป็นเพื่อรับจากไบต์ (ผ่าน UTF-8) หรือ UTF-16 อักขระไปยังจุดรหัสจริง

บ่อยครั้งที่ส่วนต่างๆของ API ที่ใช้ตรรกะนั้นและทำให้คุณสามารถเข้าถึงจุดรหัสนั้นได้ถูกเพิ่มเข้ามาในภายหลังเนื่องจากตอนแรกมี ascii 7 บิตจากนั้นอีกเล็กน้อยต่อมาทุกคนคิดว่า 8 บิตเพียงพอแล้วโดยใช้หน้าโค้ดที่แตกต่างกันและแม้กระทั่ง หลังจากนั้น 16 บิตก็เพียงพอสำหรับ Unicode แนวคิดของจุดรหัสเป็นตัวเลขจำนวนเต็มโดยไม่มีขีด จำกัด บนคงที่ในอดีตถูกเพิ่มเป็นความยาวอักขระทั่วไปที่สี่สำหรับการเข้ารหัสข้อความเชิงตรรกะ

การใช้ API ที่ช่วยให้คุณเข้าถึงจุดรหัสจริงดูเหมือนจะเป็นเช่นนั้น แต่...

ประการที่สามมีจุดรหัสปรับเปลี่ยนจำนวนมากที่ส่งผลต่อจุดรหัสถัดไปหรือจุดรหัสต่อไป เช่นมีตัวปรับเสียงที่เปลี่ยน a ต่อไปนี้เป็นä, e ถึงë, & c หมุนจุดรหัสไปรอบ ๆ และกลายเป็นeäซึ่งทำจากตัวอักษรที่แตกต่างกัน มีการแทนค่าโดยตรงของเช่นäเป็นจุดรหัสของตัวเอง แต่การใช้ตัวปรับเปลี่ยนก็ใช้ได้เช่นกัน

ประการที่สี่ทุกอย่างอยู่ในกระแสคงที่ นอกจากนี้ยังมีตัวปรับแต่งมากมายในอีโมจิดังที่ใช้ในตัวอย่างและมีการเพิ่มตัวปรับแต่งเพิ่มเติมทุกปี ดังนั้นหาก API ให้คุณเข้าถึงข้อมูลว่าจุดโค้ดเป็นตัวปรับแต่งหรือไม่เวอร์ชันของ API จะเป็นตัวกำหนดว่ามันรู้จักตัวแก้ไขใหม่ที่เฉพาะเจาะจง

Unicode มีเคล็ดลับแฮ็กแม้ว่าจะเป็นเรื่องเกี่ยวกับรูปลักษณ์ภายนอกเท่านั้น:

มีการเขียนตัวปรับทิศทาง ในกรณีของตัวอย่างจะใช้ทิศทางการเขียนแบบซ้ายไปขวา เพียงเพิ่มตัวปรับทิศทางการเขียนจากขวาไปซ้ายที่จุดเริ่มต้นของข้อความและขึ้นอยู่กับเวอร์ชันของ API / เบราว์เซอร์มันจะมีลักษณะย้อนกลับอย่างถูกต้อง😎

"\ u202e" เรียกว่าการแทนที่จากขวาไปซ้ายซึ่งเป็นรุ่นที่แข็งแกร่งที่สุดของเครื่องหมายจากขวาไปซ้าย

ดูคำอธิบายนี้โดย w3.org

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>

ฉันรู้ว่า! ฉันจะใช้ RegExp เกิดอะไรขึ้น? (ตอบทิ้งไว้เป็นแบบฝึกหัดสำหรับผู้อ่าน)

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

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

console.log(reversed);

ทางเลือกอื่นคือการใช้runesไลบรารีโซลูชันขนาดเล็ก แต่มีประสิทธิภาพ:

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"

คุณไม่เพียงมีปัญหากับอีโมจิ แต่ยังรวมถึงตัวละครอื่น ๆ สิ่งเหล่านี้ที่ให้ความรู้สึกเหมือนตัวอักษรแต่ละตัว แต่จริงๆแล้วเป็นอักขระ Unicode หนึ่งตัวหรือมากกว่านั้นเรียกว่า "คลัสเตอร์ grapheme แบบขยาย"

การแบ่งสตริงออกเป็นคลัสเตอร์เหล่านี้เป็นเรื่องยุ่งยาก (ตัวอย่างเช่นดูเอกสาร Unicodeเหล่านี้) ฉันจะไม่พึ่งพาการใช้งานด้วยตนเอง แต่ใช้ไลบรารีที่มีอยู่ Google ชี้ให้ฉันไปที่ไลบรารีตัวแยกกราฟฟีม เอกสารสำหรับไลบรารีนี้มีตัวอย่างที่ดีที่จะนำไปใช้งานส่วนใหญ่:

เมื่อใช้สิ่งนี้คุณควรจะสามารถเขียน:

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

ASIDE: สำหรับผู้มาเยือนจากอนาคตหรือผู้ที่ต้องการอาศัยอยู่บนขอบเลือด:

มีข้อเสนอคือในการเพิ่ม grapheme segmenter ในมาตรฐานจาวาสคริปต์ (จริงๆแล้วมันมีตัวเลือกการแบ่งกลุ่มอื่น ๆ ด้วย) อยู่ระหว่างการตรวจสอบขั้นตอนที่ 3 สำหรับการยอมรับในขณะนี้และปัจจุบันมีการใช้งานใน JSC และ V8 (ดูhttps://github.com/tc39/proposal-intl-segmenter/issues/114 )

การใช้รหัสนี้จะมีลักษณะดังนี้:

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('');

คุณอาจจะทำให้มันดูดีกว่านี้ได้ถ้าคุณรู้จักจาวาสคริปต์ที่ทันสมัยกว่าฉัน ...

มีการนำไปใช้ที่นี่ - แต่ฉันไม่รู้ว่าต้องใช้อะไรบ้าง

หมายเหตุ: สิ่งนี้ชี้ให้เห็นถึงปัญหาสนุก ๆ ที่คำตอบอื่น ๆ ยังไม่ได้กล่าวถึง การแบ่งกลุ่มอาจขึ้นอยู่กับโลแคลที่คุณใช้ไม่ใช่แค่อักขระในสตริง

ฉันแค่ตัดสินใจที่จะทำเพื่อความสนุกเป็นความท้าทายที่ดี ไม่แน่ใจว่าถูกต้องในทุกกรณีดังนั้นให้ใช้โดยยอมรับความเสี่ยงเอง แต่นี่คือ:

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();

คุณสามารถใช้ได้:

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

ควรเปลี่ยนสตริงของคุณให้เป็นรายการย้อนกลับแล้วทำให้เป็นสตริงอีกครั้ง

const text = 'สวัสดีชาวโลก ‍🦰👩‍👩‍👦‍👦';

const กลับด้าน = text.split (''). reverse (). join ('');

console.log (ย้อนกลับ);