What is the purpose of the JSON.stringify() function converting special characters?

I attempted the following code snippet:

console.log(JSON.stringify({ test: "\u30FCabc" }));

The result is as follows:

'{"test":"ーabc"}'

We are aware that primarily, the JSON.stringify() method converts a JavaScript object or value into a JSON string. According to the JSON standard (https://www.json.org/json-en.html), we should be able to store \u30FC. So why does "\u30FC" get converted to "ー"?

Answer №1

So, why does "\u30FC" get converted to "ー"?

  1. When your string literal is read by the JavaScript engine, it automatically converts it to create the in-memory string with the correct character.
  2. This object with the converted string is then passed to the function JSON.stringify.
  3. The JSON.stringify encodes the object into JSON format and represents the character "ー" literally because the function is designed to prioritize literal characters over escape sequences when formatting JSON data.

With some JSON encoding systems, like PHP for example, you have more control over this conversion:

<?php echo json_encode('ーabc', JSON_UNESCAPED_UNICODE); ?>

Compared to:

<?php echo json_encode('ーabc'); ?>

However, unlike PHP, JavaScript's JSON.stringify doesn't provide an option to customize this behavior.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the purpose of the 'onClassExtended' function in Extjs 6 for class definition?

Ext.define('Algorithm.data.Simulated', { needs: [ //.... ], onClassExtended: function(obj, info) { // .... } }) I came across this code snippet but couldn't locate any official documentation for it on Sencha ...

Adjust the loading bar component in Material UI to allow for customizable color changes

I am currently learning how to use material ui. My goal is to customize the loading bar's CSS. I checked the documentation and utilized colorPrimary classes. However, the changes are not appearing as expected. Could you please guide me on how to resol ...

"Threads snap as soon as they begin to be put to use

Encountering an issue with the command yarn run serve, the error log states: $ vue-cli-service serve INFO Starting development server... 10% building 2/2 modules 0 activeevents.js:173 throw er; // Unhandled 'err ...

Guide to creating a versatile navigation bar using Bootstrap and HTML

I am looking to create a navigation menu that can be easily reused across multiple pages on my bootstrap/html website. Instead of duplicating code, I want to implement a solution for creating a reusable navigation menu in bootstrap/html. How can this be ...

Is there a way to find a substring that ends precisely at the end of a string?

Looking to rename a file, the name is: Planet.Earth.01.From.Pole.to.Pole.2006.1080p.HDDVD.x264.anoXmous_.mp4 I want to remove everything starting from 2006 onwards. I considered using JavaScript string methods to find the index of the unnecessary part an ...

Add-on or code snippet for Node.js that allows for optional regex groups

Strings in Sequence line 1 = [A B C] line 2 = [A C] line 3 = [B C] Regular Expression /\[?(?<groupA>[A])?(?:[ ]*)?(?<groupB>[B])?(?:[ ]*)?(?<groupC>[C])\]/gm Is there a way to achieve the desired output using a plugin or spe ...

Using AngularJS to update text content retrieved from a file and display it in a textarea

Is there a way to create a textarea using AngularJS that can be populated either by typing, entering a URL, or uploading a plain text file? While I am able to load the file content into the variable linked to the textarea, I'm facing an issue where ge ...

What is the most effective way to transfer visitor hits information from an Express.js server to Next.js?

I've developed a basic next.js application with an express.js backend. What I'm aiming for is to have the server track hits every time a user visits the site and then send this hit count back to the next.js application. Check out my server.js cod ...

Experiencing issues with exporting <SVG> file due to corruption

I received some downvotes on my previous post, and I'm not sure why. My question was clear, and I provided a lot of information. Let's give it another shot. My issue is with exporting <SVG> files from an HTML document. When I try to open t ...

Simply click on a single checkbox in ReactJS

Is there a way to implement a method in which clicking on one checkbox will automatically deselect the other checkboxes, allowing only one selection at a time? import React, { Component } from 'react'; export default class Tablerow extends Comp ...

Ember-Data: Extracting nested JSON properties with ease

Upon receiving JSON data, it is presented in the following format: { "status": "success", "data": { "debtor": { "debtor_id": 1301, "key": value, "key": value, "key": value } } } The challenge lies in configuring the ...

Using JSON Schema to validate multiple occurrences of a property

I'm currently working on defining a JSON schema that includes multiple properties for instances of the same object in a Java application endpoint. For instance, here is a simple example of what I'm aiming to accomplish: { "$schema": "http://jso ...

Implementing automatic dark mode activation during nighttime with jQuery or JavaScript

I'm looking to implement an automatic dark mode feature on my website that switches on at night and off during the day or morning. Currently, my website has a dark mode toggle code that allows users to switch between dark and light modes using local ...

Error encountered: Unexpected token when defining inline style in React

When attempting to prevent scrolling on the page by using style='overflow-y: auto;': render() { return ( <div style={{overflow-y: auto}}> <div>{this.props.title}</div> <div>{this.props.children}& ...

What is the established procedure for resetting all elements within an (X)HTML document?

Is there a way to reset elements without using a form like how it can be done with JavaScript? document.forms[0].reset(); I am utilizing AJAX, so do I need to loop through all the elements using JavaScript? ...

Vue: Struggling to render JavaScript Map containing keys and values using v-for :key

I have an example Json data like so: { "data":{ "1":{ "color":"red", "size":"big" }, "2":{ "color":"red", "size":"big" }, "3":{ "color":"red", "size":"big" }, ...

Modifying the CSS Property of a Non-React Element within a React Application

I am currently in the process of developing a React-based application that will operate within a Wordpress page. The application is mostly self-contained, but I am interested in being able to toggle the visibility of a div element on the page that is not p ...

I'm experiencing issues with event.preventDefault() not functioning properly when used within a contenteditable div

I'm currently working with some basic Angular 7.x code that involves a contenteditable div. I'm attempting to prevent the default action when a user hits the [ENTER] key, but no matter what I do, it still moves the cursor to the next line. What a ...

Failed to retrieve the item stored in the local storage

I am encountering an issue where I am unable to retrieve an item from local storage and display it. In store.js, I am trying to get the shippingAddress from local storage but it is not showing up in the form. Although I am able to set the shippingAddress i ...

Vue alert]: The element "options" is not declared in the current instance but is being referenced during the rendering process. Facing problem with Vue JS

Encountering an error while rendering the project. I've thoroughly checked all details but couldn't pinpoint which line is causing the issue. The console displays the following warning: Vue warn]: Property or method "options" is not defined on th ...