Is it possible to automatically stringify in JavaScript?

Question

I know I can create a toString() function on an object, so that every time it's printed or treated like a string it will first stringify the object with that function.

Is it possible to do that directly so I can use String object functions on the object?

var SomeObject = function(a, b){
    this.a = a;
    this.b = b
}

SomeObject.prototype.toString = function(){
    return [ this.a, this.b ].join(' ')
}

var objInstance = new SomeObject('this', 'that');

console.log(objInstance + '')                // This that
console.log(("" + objInstance).split(''))    // [ 't', 'h', 'i', 's', ' ', 't', 'h', 'a', 't' ]
console.log(objInstance.split())             // Error

Is it possible to do so that the object "behaves" like a string when a String function is called on it?

In other words, I'd like objInstance.split() to have the same result as ("" + objInstance).split(''), and also objInstance.length or objInstance.match(/something/), etc.

So you want to be able to concatenate all values of an object and search through it. You're doing it for searching purpose right ? — Walfrat
– Walfrat, Commented Dec 17, 2018 at 12:36

Bergi · Accepted Answer · 2018-12-17 12:41:38Z

29

You can let your objects inherit from String so that all string methods become available:

class SomeObject extends String {
  constructor(a, b) {
    super(a + " " + b);
    this.a = a;
    this.b = b;
  }
}

var obj = new SomeObject('this', 'that');
console.log(obj.split(""));

No need to use complicated Proxy solutions :-)

All the String.prototype methods (except for .toString, .valueOf and [Symbol.iterator]) are "intentionally generic; [they do] not require that its this value be a String object. Therefore, [they] can be transferred to other kinds of objects for use as a method." You can call them on any value, they will coerce it to a string (using .toString() or .valueOf as usual).

You don't even need to use ES6 class extends to inherit from the builtin (which also makes your string value immutable), it works in ES5 as well:

function SomeObject(a, b) {
  this.a = a;
  this.b = b;
}
SomeObject.prototype = Object.create(String.prototype);
SomeObject.prototype.constructor = SomeObject;
SomeObject.prototype.toString = function() {
    return this.a + " " + this.b;
};

var obj = new SomeObject('this', 'that');
console.log(obj.split(""));

edited Dec 17, 2018 at 12:41

answered Dec 17, 2018 at 9:17

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

usr Over a year ago

Is this considered good practice? It seems like a misuse of inheritance.

Bergi Over a year ago

@usr Maybe it is, I don't know the OPs use case. However, if they want all of Strings methods on their custom instances, that sounds quite a bit like subtyping.

CertainPerformance · Accepted Answer · 2018-12-17 10:16:52Z

22

One option would be to return a Proxy that checks whether the property exists on String.prototype, and if it does, calls that property with the string that represents the object:

// Declare the proxy handler up front here
// to avoid unnecessary creation of duplicate handler objects
const handler = {
  get(obj, prop) {
    if (obj[prop] !== undefined) {
      return obj[prop];
    }
    const stringMethod = String.prototype[prop];
    if (stringMethod) {
      return stringMethod.bind(obj.a + ' ' + obj.b);
    }
  },
};

const SomeClass = function(a, b) {
  this.a = a;
  this.b = b
  return new Proxy(this, handler);
}

const instance = new SomeClass('this', 'that');

// String methods:
console.log(instance.trim());
console.log(instance.includes('this'));
console.log(instance.includes('somethingelse'));
console.log(instance.split(''));

// Can still assign and retrieve values directly on the object as normal:
instance.foo = 'foo';
console.log(instance.foo);

edited Dec 17, 2018 at 10:16

answered Dec 17, 2018 at 6:39

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

2 Comments

devildelta Over a year ago

+1. Remark: this definition is only available in ecmascript 6 or later. Reference

Bergi Over a year ago

I would recommend to declare the handler object outside of the constructor function, for the same reason that you should define methods on the prototype. Then you'd also use the target argument instead of closing over this.

T.J. Crowder · Accepted Answer · 2018-12-17 11:10:10Z

2

One option to extend the SomeObject too, something like this.

var SomeObject = function(a, b){
    this.a = a;
    this.b = b
}

SomeObject.prototype.toString = function(){
    return [ this.a, this.b ].join(' ')
};

SomeObject.prototype.split = function() {
   return String.prototype.split.apply(this.toString(), arguments);
};

var objInstance = new SomeObject('this', 'that');

console.log(objInstance + '')                // this that
//console.log(("" + objInstance).split(''))    // [ 't', 'h', 'i', 's', ' ', 't', 'h', 'a', 't' ]
console.log(objInstance.split(''));

In a comment you've asked:

I was thinking about doing this programmatically by doing it for all functions - but is there a way to list all functions of an object?

Yes, you'd use getOwnPropertyNames on String.prototype and filter out the ones that aren't functions:

var SomeObject = function(a, b){
    this.a = a;
    this.b = b
}

SomeObject.prototype.toString = function(){
    return [ this.a, this.b ].join(' ')
};

Object.getOwnPropertyNames(String.prototype).forEach(function(name) {
    var fn = String.prototype[name];
    if (name !== "toString" && typeof fn === "function") {
        SomeObject.prototype[name] = function() {
            return fn.apply(this.toString(), arguments);
        };
    }
});

var objInstance = new SomeObject('this', 'that');

console.log(objInstance + '')                // this that
//console.log(("" + objInstance).split(''))    // [ 't', 'h', 'i', 's', ' ', 't', 'h', 'a', 't' ]
console.log(objInstance.split(''));

edited Dec 17, 2018 at 11:10

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

answered Dec 17, 2018 at 6:41

Just code

13.8k10 gold badges54 silver badges94 bronze badges

7 Comments

simone Over a year ago

Interesting thought. I was thinking about doing this programmatically by doing it for all functions - but is there a way to lost all functions of an object?

Just code Over a year ago

@simone lost all functions of an object you mean? Do it only if you have custom requirements, doesn't makes sense if you do it for all the functions.

simone Over a year ago

"lost" should have been "list" - list all functions of an object

Just code Over a year ago

@simone to handle all the functions of an object, you can use certainperformance's solution.

simone Over a year ago

I was wondering about performance in using Proxy. Same as in setting the prototype in a deleted solution. But both look quite interesting...

|

Collectives™ on Stack Overflow

Is it possible to automatically stringify in JavaScript?

3 Answers 3

2 Comments

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related